一、什么是axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

二、特性

1. 从浏览器中创建 XMLHttpRequests
2. 从 node.js 创建 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求数据和响应数据
6. 取消请求
7. 自动转换 JSON 数据
8. 客户端支持防御 XSRF

三、安装

1. npm安装： npm install axios
2. 使用cdn：

四、axios请求方式

通过axios发送get请求和post请求

// get请求
axios({
  method: 'GET',		// 请求方式
  url: '/user',	// 接口地址
  params:{				// get请求参数
      name:'zs',		
      age:20
  }  
}).then(res=>{		// 成功处理函数
    console.log(res);
});

// post请求
axios({
  method: 'POST',		// 请求方式
  url: '/user',			// 接口地址
  data:{				// post请求参数, 请求体
      name:'zs',		
      age:20
  }
}).then(res=>{			// 成功处理函数
    console.log(res);
})

通过axios.get()发送get请求

axios.get('数据接口地址',{
    // get请求的参数
    params:{
        name:'zs',
        age:20
    }
}).then(res=>{		// 成功处理函数
    console.log(res);
})

通过axios.post()发送post请求

axios.post('数据接口地址',{	
    name:''		// 请求体
}).then(res=>{	// 成功处理函数
    console.log(res);
})

其他请求方法的别名：

axios.request(config)
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

五、axios拦截器

分为请求拦截器和响应拦截器，主要是在请求或响应被 then 或 catch 处理前拦截它们，做出一定的业务处理；

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

// 如果想移出拦截器则
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

// 在自定义的axios实例中设置拦截器
const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

六、axios的全局配置

全局配置基础域名：axios.defaults.baseURL='http://localhost:3333'

配置请求头：axios.defaults.headers.自定义请求头="请求头内容"

并发：处理并发请求的助手函数；

• axios.all(iterable)

import axios from 'axios';
export default {
    created(){
        // 使用axios.all批量发送数据请求
        axios.all([this.getBrand1(),this.getBrand2()]).then(res=>{
          console.log(res);
        })
    },
    methods:{
        async getBrand1(){
          const res=await this.$http.get(`/brandDetail/23`);
          return res;
        },
        async getBrand2(){
          const res=await this.$http.get(`/brandDetail/22`);
          return res;
        }
    }
};

• axios.spread(callback)