Axios

什么是Axios？

基于promise异步的HTTP客户端，在浏览器和node.js都兼容。其实就是对http请求进行的封装。

axios的主要特点如下：（详见：GitHub）
- 浏览器端调用XMLHttpRequests模块进行请求，node.js端调用http模块进行请求
- 支持promise异步
- 请求拦截器和响应拦截器
- 转换请求和响应数据
- 自动转换json数据
- 支持XSRF
- ...

使用Axios

没有做代理的时候，需要把在./node_modules下的axios.js放到前端的代码路径下。
axios将http各类请求进行了封装，可以直接使用axios进行http请求（get、post、delete等均支持，源码是通过数组循环获取到对应的请求方式）

安装axios

npm install axios --save

导入axios框架

import axios from "axios"

如果不进行配置，axios默认get请求

axios({
  url:"http://loacalhost:8888/public/index.html"
})

axios请求会返回一个promise对象（注意，返回的是对象），如果请求成功，将会调用reslove()函数，所以可以吧请求成功处理responseData的代码放到then方法中执行。同理，请求失败会调用reject()函数，可以用catch方法进行处理。

axios({
    url:"http://loacalhost:8888/public/index.html"
}).then(res=>console.log(res)).catch(err=>console.log(err))

使用axios发送get请求的实例：

//直接在url中拼数据
axios.get('/user?ID=12345').then(function (responseData) {
    console.log(responseData);
  }).catch(function (error) {
    console.log(error);
  });

// 通过配置文件传入数据
axios.get('/user',{
  params:{
    ID:12345
  }
}).then(function (responseData) {
  console.log(responseData);
}).catch(function (error) {
  console.log(error);
});

使用axios发送post请求的实例：

axios.post('/user',{
    username:'aaa',
    password:'111'
}).then(function (responseData) {
  console.log(responseData);
}).catch(function (error) {
  console.log(error);
});

配置

axios请求的配置主要有三类：

框架的默认配置default，不如什么都不配置，axios默认get请求
创建instance实例之后，实例的默认配置instance.default
书写axios请求时，写在请求函数中的自定义配置 request config

这三个配置是存在合并配置的（类似assign），所以三者的优先级是 request config > instance.default > system.default

拦截器 intercepter

拦截器的作用类似与中间件，axios对请求进行处理，如果请求开始之前、请求完成之后需要需要执行一些动作，这个工作就是通过拦截器进行执行。

请求拦截器

请求拦截器会在axios发送http请求之前先拦截axios请求的配置，并对这些配置再进行处理。

axios.intercepters.request.use(function(requestConfig){
    //请求拦截器的requestConfig是axios请求的配置（可能包含请求头、token等各种数据），拦截器先截取这部分配置数据，用来做需要的处理
    console.log('请求拦截器');
    return requestConfig; //需要返回requestConfig配置，这样剩下的请求拦截器才能拿到requestConfig
},function(error){
    //用来处理出现error后的逻辑
})

比如，可以在axios.intercepters.request中对token进行处理，或者在请求时增加加载渲染动画等等。

axios.interceptors.request.use(
  function(config) {
    // 设置统一的请求头
    if(cookie.getCookie('token')){
        config.headers.Authorization = "Bearer " + cookie.getCookie("token")
    }
    return config;
  },
  function(error) {
    return Promise.reject(error);
  }
);

响应拦截器

响应拦截器会在axios请求之后，先对拿到的相应数据进行处理。

axios.interceptors.response.use(function(responseData) {
    //响应拦截器会截取请求后拿到的数据，然后先对这些数据做需要的处理
    console.log('相应拦截器');
    return responseData; //需要返回data，这样后续的相应拦截器才能拿到data
}, function(error) {
    //用来处理出现error后的逻辑
});
axios.interceptors.response.use(function(responseData) {
    //响应拦截器2
}, function(error) {});

业务流程

请求拦截器函数（请求前想要执行的动作） => axios 发送请求 => 响应拦截器函数（收到相应之后想要执行的动作） => 最终才去执行业务逻辑

初识axios