基本配置

axios({
        method: 'post',
        url:''
}).then(res => {})
// 或者直接跟请求方式
// post
axios.post('',{
      miaov:"课堂"  //发送的数据
}).then(res => {})
// get
axios.get('', {
    params: {
        pomelo: 'tt'
    }
}).then(res => {})

自定义请求实例

1. 先创建对象

var HTTP = axios.create({})   // {}中放入配置项

2. 其他配置

var HTTP = axios.create({
     baseURL:'', // 基础url
    timeout: 1000, // 请求延时时间
    responseType:'json', //请求数据类型包括  'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
    headers:{
      'custome-header': 'miaov',
      'content-type':'application/x-www-form-urlencoded'   //转换为key=value的格式必须增加content-type
    },
    transformRequest:[function(data){
        console.log(data)
        data.age = 30; //发送之前增加的属性
        return queryString.stringify(data); //利用对应方法转换格式
    }]
})

axios并发请求

通过axios.all()，需在两个请求都完成后才能被成功调用

    function http1(){
      return HTTP.get("test-axios")
    }
    function http2(){
      return HTTP.post("test-post-axios")
    }
   //注意此时常使用axios.spread()方法接收多个响应数据
      axios.all([http1(),http2()]).then(axios.spread((res1,res2)=>{
          console.log(res1)
          console.log(res2)
      })).catch((error) =>{
        if (axios.isCancel(error)) {
          console.log(error.message);
        }else{
            console.log(error)
        }
    })

axios拦截器

1. 拦截请求

HTTP.interceptors.request.use((config) => {
    //在发送请求之前做某事
    console.log(config)  //单次请求的配置信息对象
    return config;  //只有return config后，才能成功发送请求
  },(error) => {
    //请求错误时做些事
    return Promise.reject(error);
  });

2. 拦截响应

HTTP.interceptors.response.use((data) => {
      console.log(data)  //响应数据
      return data;   //只有return data后才能完成响应
}, error => {
    return Promise.reject(error);
})