vue中axios的介绍

 一、axiox介绍

1、Axios特性

• 支持Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

2、Axios浏览器支持

 二、基础用法（get、post、put等请求方法）

axios的请求方法：get、post、put、patch、delete（常用的五种）

• get:获取数据
• post:提交数据（表单提交+文件上传）
• put:更新数据（所有数据推送到后端）
• patch:更新数据（只将修改的数据推送给后端）
• delete:删除数据

---

 1、get:获取数据

写法一：

//http://localhost:8080/data.json?id=12
axios.get('/data.json',{
　　params:{
　　　　id:12
　　}
}).then((res){
   console.log(res) 
})

写法二

axios({
   method:'get',
   url:'/data.json', 
   params:{
       id:12
    } 
}).then(res =>{
   console.log(res) 
})    

---

 2、post:提交数据（表单提交+文件上传）

 写法一：

let data = {
   id:12  
}
axios.post('/post',data).then(res =>{
    console.log('res) 
})

写法二：

axios({
   method:'post',
   url:'/post',
   data:data  
}).then(res=>{
   console.log(res) 
})

　数据是JSON的形式

　

form-data请求

let formdata = new FormData()
for(let key in data){
   formdata.append(key,data[key])
}
axios.post("/post",formData).then(res =>{
    console.log('res')
})

　数据的形式

：

---

3、put:更新数据（所有数据推送到后端）

同get和post

put与post几乎一样，只是method不一样

---

4、patch:更新数据（只将修改的数据推送给后端）

同get和post

---

5、delete:删除数据

写法一

axios.delete('/delete',{
     params:{
         id:12
    }
}).then(res =>{
   console.log(res)
})

　　 

axios.delete('/delete',{
     data:{
         id:12
    }
}).then(res =>{
   console.log(res)
})

 

 

写法二

axios({
   method:'delete',
   url:'/delete',
   params:{},
   data:{}
}).then(res => {
   console.log(res)
})

---

什么是并发请求？

并发请求：同时进行多个请求，并统一处理

请求的方法:

axios.all()

axios.spread()

axios.all(
    [
        axios.get('/data.json‘),
         axios.get('/city.json‘),
    ]    
).then(
    axios.spread((dataRes,cityRes) => {
        console.log(dataRes,cityRes)
    })
)

---

三、进阶用法（实例、配置、拦截器、取消请求等）

1、创建axios实例

当后端接口地址有多个，并且超时时长不一样时可以创建一个axios实例

let instance = axios.create({
    baseURL:'http://localhost:8080',
    timeout:1000
})
let axios2= axios.create({
    baseURL:'http://localhost:9090',
    timeout:5000
})

instance.get('/data.json').then(res =>{
    console.log(res)
})

axios2.get('/city.json').then(res =>{
    console.log(res)
})

---

2、实例的相关配置

axios的配置：

axios.create({
    baseURL:'',    //请求的域名，基本地址
    timeout:1000,    //超时时长（ms）
    url:'/data.json' ,  //请求路径
    method：’get‘ ,  //请求方法   get/post/pu/patch/delete
    headers:{    //请求头
        token:' '
    },
     params:{},    //请求参数拼接在url上
     data:{},       //请求参数放在请求体
})

axios.get('/data.json',{
   params:{
        id:12
    }
})    

　axios.get('/data.json',{}),有两个参数，第二个参数就是写axios实例的相关配置的　

• axios全局配置
• axios实例配置
• axios请求配置

1、axios全局配置

axios.defaulte.timeout = 1000
axios.defaulte.baseURL = 'http://localhost:8080'

　　一般全局配置都只是修改这两个参数

2、axios实例配置

let instance  = axios.create()
instance.defaults.timeout = 3000    

3、请求配置

instance.get('data.json',{
    timeout:5000
}) 

　　优先级：请求配置 >  实例配置 > 全局配置 

---

3、在实际开发中

实例1：

有两种请求接口：http:localhost:9090 、http:localhost:9091

let instance = axios.create({
    baseURL:'http:localhost:9090',
    timeout:1000
})
let instance1 = axios.create({
    baseURL:'http:localhost:9091',
    timeout:3000
})

instance.get('/contactList',{
   params:{  id:12 }    
}).then((res) =>{
   console.log(res)
})//此实例应用到了baseURL，timeout，url，method,params

实例2：

只有一个方法的数据量很大时，修改此方法的超时时长

instance1.get('/contactList',{
  timeout:5000
}).then((res) =>{
   console.log(res)
})
//此实例应用到了baseURL、timeout:5000、method、url

---

4、拦截器　　

拦截器： 在请求或响应被处理前拦截它们

• 请求拦截器
• 响应拦截器

请求拦截器

axios.interceptors.request.use
(config =>{
     //在发送请求前做些什么
     return config
}) ,err=>{
     //在请求错误的时候做些什么
     return Promise.reject(err)
}

响应拦截器

axios.interceptors.response.use
(res =>{
     //请求成功对响应数据作处理
     return res    //这里的res返回后是axios.get().then(res=>{})中的res
}),errr=>{
      //响应错误做写什么
      return Promise.reject(err)    //这里的err返回后是axios.get().then().catch(err =>{})中的err
}

取消拦截器（了解,一般情况下不会取消拦截器的）

let interceptors = axios.interceptors.request.use
(config =>{
    config.headers= {
           auth:true
     }
     return config
})

axios.interceptors.request.eject(interceptors)

---

5、错误处理

axios.get('/data.json').then((res) =>{
   console.log(res)
}).catch(err =>{
   console.log(err)
})

　实例：实际开发过程中，一般添加统一错误处理

错误处理---请求拦截器

let instance = axios.create({})
instance.interceptors.request(config =>{
    return config
},err=>{
   //一般请求错误http状态码以4开头，常见：401 超时；404   not found　
   $('#modal').show()
    setTimeout(() =>{
        $('#modal').hide()
    },200)
   return Promise.reject(err)
})

　　错误处理---响应拦截器

instance.interceptors.response.use(res =>{
    return res
},err=>{
  //一般响应错误http状态码以5开头，常见：500 系统错误；502系统重启
   $('#modal').show()
   setTimeout(() =>{
      $('#modal').hide()
   },200)
   return Promise.reject(err)
})

---

　取消请求（了解，几乎用不到）

 四、axios进一步封装，在项目中的实际应用

 axios的封装(重点)

1. 统一管理url
2. 对请求统一的封装

一、新建文件  /service/contactApi.js

const CONTACT_API = {
     //例子：获取联系人列表
     getContactList:{
        method:'get',
        url:'/contactList'
    }
    //例子：新建联系人   from-data
     newContactForm:{
        method:'post',
        url:'/contact/new/form'
    }
   //例子：新建联系人   application/json
     newContactJson:{
        method:'post',
        url:'/contact/new/json'
    }
     //例子：编辑联系人  
     editContact:{
        method:'put',
        url:'/contact/edit'
    }
    //例子：删除联系人
     deleteContact:{
        method:'delete',
        url:'/contact'
    }
｝    
export default CONTACT_API

二、封装axios,新建/service/http.js

import axios from 'axios'
import service from './contactApi'
import Toast from 'Vant'
//service循环遍历输出不同的请求方法
let instance = axios.create({
     baseURL:'http://localhost:9000/api',
     timeout:1000
})

const Http = {}   //包裹请求方法的容器

//请求格式/参数的统一
for(let key in service){   //这里的key代表的是newContactJson,editContact等
    let api = service[key];    //url  method
     //async作用：避免进入回调地狱
    Http[key] =  async function(
        params,   //请求参数 get：url，put，post，patch(data)， delete:url
        isFormData = false,    //标识是否是form-data请求
        config={}    //配置参数
    ){  
         let newParams = {}
         //content-type是否是form-data的判断
         if(params && isFormData){
               newParams = new FormData()
               for(let i in params){
                    newParams.append(i,params[i])
               }
         }else{
                newParams = params
         }
        let response = {}   //请求的返回值
         //不同请求的判断
        if(api.method === 'put' || api.method === 'post' || api.method === 'patch'){
          try{
              response = await instance[api.method](api.url,newParams,config)
           }catch(err){
               response = err
           }
        }else if(api.method === 'delete' || api.method === 'get'){
              config.params = newParams
              try{
                  response = await instance[api.method](api.url,config)
              }catch(err){
                  response = err
              }
        }
        return response;     //返回请求的响应值
    }
} 


//拦截器的添加
//请求拦截器
instance.interceptorswx.request(config=>{
  //发起请求前做些什么
   Toast.loading({
     mask:false,
     duration:0, //一直存在
     forbidClick:true,//禁止点击
     message:'加载中...'
   })
   return config
},()=>{
  //请求错误
  Toast.clear()//清楚轻提示
  Toast('请求错误，请稍后重试')
})

// 响应拦截器
instance.interceptors.response.use(res=>{
  //请求成功
  Toast.clear()
  return res.data
},()=>{
  //请求错误
  Toast.clear()//清楚轻提示
  Toast('请求错误，请稍后重试')
})

export default Http

三、调用Http

在main.js

import Http from './service/http'
//把Http挂载到Vue实例上
Vue.prototype.$Http = Http

四、使用接口

 methods:{
    // 查询
    async getList(){
      let res = await
      this.$Http.getContactList()
      this.list = res.data
    }

五、扩展