Axios 二次封装

1. 项目中对 axios 进行了二次封装，使用到了以下几个API：

       axios.create([config])：创建一个新的axios

       axios.interceptors.request.use(config=>{}, error=>{})：添加请求拦截器

       axios.interceptors.response.use(response=>{}, error=>{})：添加响应拦截器

 2. axios.create(config) 对axios请求进行二次封装

      - 项目业务根据不同的功能模块划分为不同的 url 前缀等等，我们就可以根据功能模块配置不同的 axios 配置。

   根据指定配置创建一个新的 axios ,也就是每个axios 都有自己的配置

      - 新的 axios 只是没有 取消请求 和 批量请求 的方法，其它所有语法都是一致的

      - 为什么要这种语法？

        需求：项目中有部分接口需要的配置与另一部分接口的配置不太一样

        解决：创建2个新的 axios ，每个都有自己的配置，分别对应不同要求的接口请求中

                  一般是axios.create()中的baseURL、 request的第一个函数config、 response的第一个函数response 这三者不同。

axios.create({
  baseURL: 'http://localhost:3000', // url = base url + request url
  timeout: 20000 // request timeout
})

// 二次封装 axios 的文件 request.js
import axios from "axios";
const service = axios.create({
  baseURL: '',
});
// 请求拦截器
service.interceptors.request.use(
  config => {},
  error => {}
);
// 响应拦截器
service.interceptors.response.use(
  response => {},
  error => {}
);
export default service;


// api 文件引入 request.js
import request from './request';
request({
    url: "/person/detail?id=" + id,
    method: "get",
});

  用axios请求，接口返回的参数是data里面的，但是实际返回了很多config、header等参数： 

这些都不需要。可以通过配置拦截器拦截：

 3. axios设置全局headers

     每次请求的时候都要设置 token 为 headers，非常不方便，因此我们可以设置一个全局headers，每次请求的时候就不用再设置token了：

 axios.interceptors.request.use(config => {
    config.headers.Authorization = `Bearer ${token}`
 })
 
config.headers["X-Requested-With"] = "XMLHttpRequest"; // 增加ajax请求标识，方便后台数据处理

在服务器端判断request来自Ajax请求(异步)还是传统请求(同步)：

    两种请求在请求的Header不同，Ajax 异步请求比传统的同步请求多了一个头参数：

    x-requested-with 请求头：区分ajax请求还是普通请求

转载自：Axios 二次封装 - 我就尝一口 - 博客园