1：什么是axios

axios是一种实现ajax的方式，基于promise。实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。
Axios，可以理解为ajax i/o system，这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。具备以下特点：

  1. 在浏览器中创建XMLHttpRequest请求
  2. 在node.js中发送http请求
  3. 支持Promise API
  4. 拦截请求和响应
  5. 转换请求和响应数据
  6. 取消要求
  7. 自动转换JSON数据
  8. 客户端支持防止CSRF/XSRF(跨域请求伪造)

    2： axios的请求方式：

  • axios(config)
  • axios.request(config)
  • axios.get(url [,config])
  • axios.post(url [,data [,config]])
  • axios.put(url [,data [,config]])
  • axios.delete(url [,config])
  • axios.patch(url [,data [,config]])
  • axios.head(url [,config])

    3：发送并发请求

    通过axios.all(iterable)可实现发送多个请求，参数不一定是数组，只要有iterable接口就行，函数返回的是一个数组。axios.spread(callback)可用于将结果数组展开。
    1. //发送多个请求(并发请求)，类似于promise.all，若一个请求出错，那就会停止请求
    2. const get1 = axios.get('/user/12345');
    3. const get2 = axios.get('/user/12345/permission');
    4. axios.all([get1,get2])
    5.   .then(axios.spread((res1,res2)=>{
    6.       console.log(res1,res2);
    7.   }))
    8.   .catch(err=>console.log(err))

4：axios API

axios(config)可通过设置一些属性来发送请求 

  1. //发送post请求
  2. axios({
  3.     method: 'post',  //请求方式，默认是get请求
  4.     url:'/user/12345', //地址
  5.     data:{ //参数
  6.         firstName: 'simon',
  7.         lastName: 'li'
  8.     }
  9. });

5：全局配置

  1. axios.all([axios({
  2.   url:'http://123.207.32.32:8000/home/multidata'
  3. }),axios({
  4.   url:'http://123.207.32.32:8000/home/data',
  5.   params:{
  6.     type:'sell',
  7.     page:4
  8.   }
  9. })]).then(results=>{
  10.   console.log(results);
  11.   console.log(results[0]);
  12.   console.log(results[1]);
  13. })

在上面的例子里，BaseURL是固定的，可以进行一部分抽取，也可以利用axiox的全局配置。

  1. // 全局配置
  2. // 将共有的域名定义为全局配置，使得代码更加简洁
  3. axios.defaults.baseURL ='http://123.207.32.32:8000'
  4. axios.defaults.timeout = 5000
  6. axios.all([axios({
  7.   url:'/home/multidata'
  8. }),axios({
  9.   url:'/home/data',
  10.   params:{
  11.     type:'sell',
  12.     page:4
  13.   }
  14. })]).then(axios.spread((res1,res2)=>{
  15.   console.log(res1);
  16.   console.log(res2);
  17. }))

常用的配置选项
20201210151719118.png
但是如果直接设置全局配置的话，那么当某个请求的baseURL等其他信息并不是这个的时候，却没办法灵活应对。这个时候就需要创建axios的实例。

6：axios的实例

为什么要创建axios的实例呢?

  • 当我们从axios模块中导入对象时, 使用的实例是默认的实例.
  • 当给该实例设置一些默认配置时, 这些配置就被固定下来了.
  • 但是后续开发中, 某些配置可能会不太一样.
  • 比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.
  • 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

演示如下：通过多个实例实现配置的互不干涉。 

  1. // 4.创建axios的实例
  2. const instance1 = axios.create({
  3.   baseURL:'http://123.207.32.32:8000',
  4.   timeout:5000
  5. })
  7. // 进行一次网络请求
  8. instance1({
  9.   url:'/home/multidata'
  10. }).then(res=>{
  11.   console.log(res);
  12. })
  14. instance1({
  15.   url:'/home/data',
  16.   params:{
  17.     type:'pop',
  18.     page:1
  19.   }
  20. }).then(res =>{
  21.   console.log(res);
  22. })
  24. // 从而实现每一个axios实例有自己独立的配置
  25. const instance2 = axios.create({
  26.   baseURL:'http://123.123.312.132:8000',
  27.   timeout:10000,
  29. })

7：axios框架模块封装

如果不进行封装，那么在每一次要进行网络请求的时候，我们都是单独的书写对于这个axios框架下的对应代码及其代码思路，但如果某一天，使用的这个框架出现大漏洞或者不再维护，我们不得不改用其他框架，那程序员就必须在每一个使用了axios框架的地方进行代码的修改，工作量极大。
因此，对axios进行模块封装，可以使得后面维护的成本减小。
例子：

  1. import axios, { Canceler, AxiosResponse, AxiosError, AxiosRequestConfig } from 'axios';
  2. import { ElMessage } from 'element-plus';
  3. import qs from 'qs';
  4. import pinia, { useStore } from '@/stores';
  5. import { useAxiosRequestStore } from '@/stores/axiosRequest';
  6. import './loginInterceptor';
  7. import { baseUrl, SmartResponse } from './config';
  9. // 携带cookie信息
  10. axios.defaults.withCredentials = true;
  12. // 设置defaults.baseURL
  13. axios.defaults.baseURL = baseUrl;
  15. // request 拦截器
  16. axios.interceptors.request.use(
  17.   (config: AxiosRequestConfig) => {
  18.     // vuex记录cancelToken
  19.     const axiosRequestStore = useAxiosRequestStore(pinia);
  20.     config.cancelToken = new axios.CancelToken((cancel: Canceler) => {
  21.       axiosRequestStore.pushToken({ cancelToken: cancel });
  22.     });
  23.     return config;
  24.   },
  25.   (error: any) => Promise.reject(error),
  26. );
  28. // response 拦截器 请求超时拦截，重新请求
  29. axios.interceptors.response.use(
  30.   (response: AxiosResponse) => {
  31.     const { status } = response;
  32.     if (status !== 200) {
  33.       ElMessage({
  34.         type: 'error',
  35.         message: `请求服务好像出错了，${status}`,
  36.       });
  37.       return Promise.reject(response);
  38.     }
  39.     return Promise.resolve(response);
  40.   },
  41.   (err: any) => {
  42.     const { config } = err;
  43.     if (err.message === 'interrupt') {
  44.       // 判断是否为路由跳转取消网络请求
  45.       console.warn('路由跳转取消请求');
  46.       return Promise.reject(err);
  47.     } else {
  48.       // 全局的请求次数,请求的间隙
  49.       const [RETRY_COUNT, RETRY_DELAY] = [2, 2000];
  51.       if (config && RETRY_COUNT) {
  52.         // 设置用于跟踪重试计数的变量
  53.         config.__retryCount = config.__retryCount || 0;
  54.         // 检查是否已经把重试的总数用完
  55.         if (config.__retryCount >= RETRY_COUNT) {
  56.           return Promise.reject(err);
  57.         }
  58.         // 增加重试计数
  59.         // eslint-disable-next-line no-plusplus
  60.         config.__retryCount++;
  61.         // 创造新的Promise来处理指数后退
  62.         const backoff = new Promise<void>((resolve: Function) => {
  63.           setTimeout(() => {
  64.             resolve();
  65.           }, RETRY_DELAY || 1);
  66.         });
  67.         // instance重试请求的Promise
  68.         return backoff.then(() => axios(config));
  69.       }
  70.       return Promise.reject(err);
  71.     }
  72.   },
  73. );
  75. const store = useStore(pinia);
  77. export const request = {
  78.   /**
  79.    * get获取数据，通用方法
  80.    */
  81.   doGetPromise(url: string, params?: any, options: any = {}) {
  82.     const { timeout = 30000, ...arg } = options;
  84.     return new Promise<SmartResponse>((resolve, reject) => {
  85.       axios
  86.         .get(url, {
  87.           timeout: timeout,
  88.           ...arg,
  89.           params: {
  90.             systemId: store.platformInfo.systemId, // 全面接口添加systemId字段
  91.             userId: store.userInfo.userId,
  92.             ...params,
  93.           },
  94.         })
  95.         .then((res: AxiosResponse) => {
  96.           resolve(res?.data);
  97.         })
  98.         .catch((err: AxiosError) => {
  99.           reject(err);
  100.         });
  101.     });
  102.   },
  104.   /**
  105.    * FormData数据上传，文件上传必用
  106.    */
  107.   doPostPromiseForm(url: string, formData: FormData, params: any = {}) {
  108.     return new Promise<SmartResponse>((resolve, reject) => {
  109.       axios
  110.         .post(url, formData, {
  111.           headers: {
  112.             'Content-type': 'multipart/form-data',
  113.           },
  114.           params: {
  115.             userId: store.userInfo.userId,
  116.             ...params,
  117.           },
  118.         })
  119.         .then((res: AxiosResponse) => {
  120.           resolve(res?.data);
  121.         })
  122.         .catch((err: AxiosError) => {
  123.           reject(err);
  124.         });
  125.     });
  126.   },
  128.   /**
  129.    * 默认方式提交from表单数据
  130.    */
  131.   doPostPromise(url: string, data: any, params: any = {}) {
  132.     return new Promise<SmartResponse>((resolve, reject) => {
  133.       // 全面接口添加systemId字段
  134.       if (!params.hasOwnProperty('systemId')) params.systemId = store.platformInfo.systemId;
  135.       axios
  136.         .post(url, qs.stringify(data), {
  137.           headers: {
  138.             'Content-type': 'application/x-www-form-urlencoded',
  139.           },
  140.           params: {
  141.             userId: store.userInfo.userId,
  142.             ...params,
  143.           },
  144.         })
  145.         .then((res: AxiosResponse) => {
  146.           resolve(res?.data);
  147.         })
  148.         .catch((err: AxiosError) => {
  149.           reject(err);
  150.         });
  151.     });
  152.   },
  154.   /**
  155.    * 默认方式提交json数据
  156.    */
  157.   doPostPromiseJson(url: string, data: any, params: any = {}) {
  158.     return new Promise<SmartResponse>((resolve, reject) => {
  159.       axios
  160.         .post(url, data, {
  161.           headers: {
  162.             'Content-type': 'application/json',
  163.           },
  164.           params: {
  165.             userId: store.userInfo.userId,
  166.             ...params,
  167.           },
  168.         })
  169.         .then((res: AxiosResponse) => {
  170.           resolve(res?.data);
  171.         })
  172.         .catch((err: AxiosError) => {
  173.           reject(err);
  174.         });
  175.     });
  176.   },
  178.   /**
  179.    * Put方式提交json数据
  180.    */
  181.   doPutPromiseJson(url: string, data: any, params: any = {}) {
  182.     return new Promise<SmartResponse>((resolve, reject) => {
  183.       axios
  184.         .put(url, data, {
  185.           headers: {
  186.             'Content-type': 'application/json',
  187.           },
  188.           params: { ...params },
  189.         })
  190.         .then((res: AxiosResponse) => {
  191.           resolve(res?.data);
  192.         })
  193.         .catch((err: AxiosError) => {
  194.           reject(err);
  195.         });
  196.     });
  197.   },
  199.   /**
  200.    * Patch方式提交表单数据
  201.    */
  202.   doPatchPromise(url: string, data: any) {
  203.     return new Promise<SmartResponse>((resolve, reject) => {
  204.       axios
  205.         .patch(url, qs.stringify(data), {
  206.           headers: {
  207.             'Content-type': 'application/x-www-form-urlencoded',
  208.           },
  209.           params: {},
  210.         })
  211.         .then((res: AxiosResponse) => {
  212.           resolve(res?.data);
  213.         })
  214.         .catch((err: AxiosError) => {
  215.           reject(err);
  216.         });
  217.     });
  218.   },
  220.   /**
  221.    * Patch方式提交json数据
  222.    */
  223.   doPatchPromiseJson(url: string, data: any, params: any = {}) {
  224.     return new Promise<SmartResponse>((resolve, reject) => {
  225.       axios
  226.         .patch(url, data, {
  227.           headers: {
  228.             'Content-type': 'application/json',
  229.           },
  230.           params: { ...params },
  231.         })
  232.         .then((res: AxiosResponse) => {
  233.           resolve(res?.data);
  234.         })
  235.         .catch((err: AxiosError) => {
  236.           reject(err);
  237.         });
  238.     });
  239.   },
  241.   /**
  242.    * Delete方式
  243.    */
  244.   doDeletePromise(url: string, params: any = {}) {
  245.     return new Promise<SmartResponse>((resolve, reject) => {
  246.       axios
  247.         .delete(url, {
  248.           headers: {
  249.             'Content-type': 'application/x-www-form-urlencoded',
  250.           },
  251.           params: {
  252.             ...params,
  253.           },
  254.         })
  255.         .then((res: AxiosResponse) => {
  256.           resolve(res?.data);
  257.         })
  258.         .catch((err: AxiosError) => {
  259.           reject(err);
  260.         });
  261.     });
  262.   },
  263. };

8：拦截器interceptors

拦截器是指当发送请求或者得到响应被then或catch处理之前对它们进行拦截，拦截后可对数据做一些处理，比如给请求数据添加头部信息，或对响应数据进行序列化，然后再传给浏览器，这些都可以在拦截器中进行 

  1. //添加一个请求拦截器
  2. axios.interceptors.request.use(config=>{
  3.     //在请求之前做一些事
  4.     return config;
  5. },err=>{
  6.    //请求错误的时候做一些事
  7.     return Promise.reject(err);
  8. });
  10. //添加一个响应拦截器
  11. axios.interceptors.response.use(response=>{
  12.     //对返回的数据做一些处理
  13.     reutrn response;
  14. },err=>{
  15.    //对返回的错误做一些处理
  16.     return Promise.reject(err);
  17. });
  20. //移除拦截器
  21. const myInterceptor = axios.interceptors.request.use(config=>{return cofig})
  22. axios.interceptors.request.eject(myInterceptor);
  24. //在一个axios实例中使用拦截器
  25. var instance = axios.create();
  26. instance.interceptors.request.use(function(){/*...*/});

9：Config配置选项

  1. {
  2.     //服务器的地址，是必须的选项
  3.     url: '/user',
  5.     //请求的方式，若没有则默认是get
  6.     method:'get',
  8.     //如果url不是绝对地址，则会加上baseURL
  9.     baseURL: 'http://localhost:3000/',
  11.     //transformRequest允许请求的数据在发送至服务器之前进行处理，这个属性只适用于put、post、patch方式
  12.     //数组的最后一个函数必须返回一个字符串或者一个'ArrayBuffer'或'Stream'或'Buffer' 实例或'ArrayBuffer'，'Formdata'，
  13.     //若函数中用到了headers，则需要设置headers属性    
  14.     transformRequest: [function(data,headers){
  15.         //根据需求对数据进行处理
  16.         return data;
  17.     }],    
  19.     //transformResponse允许对返回的数据传入then/catch之前进行处理    
  20.     transformResponse:[function(data){
  21.         //依需要对数据进行处理
  22.         return data;
  23.     }],   
  25.     //headers是自定义的要被发送的信息头
  26.     headers: {'X-Requested-with':'XMLHttpRequest'},
  28.     //params是请求连接中的请求参数，必须是一个纯对象
  29.     params:{
  30.       ID:12345  
  31.     },    
  33.     //paramsSerializer用于序列化参数
  34.     paramsSerializer: function(params){
  35.       return Qs.stringify(params,{arrayFormat:'brackets'});  
  36.     },     
  38.     //data是请求时作为请求体的数据——request.body
  39.     //只适用于put、post、patch请求方法
  40.     //浏览器:FormData，File，Blob;Node:stream
  41.     data:{
  42.       firstName: 'simon',  
  43.     },    
  45.     //timeout定义请求的时间，单位是毫秒，如果请求时间超过设定时间，请求将停止
  46.     timeout:1000,
  48.     //withCredentials表明跨跨域请求书否需要证明。
  49.     withCredentials:false, //默认值
  51.     //adapter适配器，允许自定义处理请求
  52.     //返回一个promise
  53.     adapter:function(config){
  54.         /*...*/
  55.     },    
  57.     //auth表明HTTP基础的认证应该被使用，并提供证书
  58.     auth:{
  59.       username:'simon',
  60.       password:'123456',    
  61.     },    
  63.     //responseType表明服务器返回的数据类型，这些类型包括：json/blob/document/         arraybuffer/text/stream    
  64.      responseType: 'json',   
  66.      //proxy定义服务器的主机名和端口号
  67.      //auth属性表明HTTP基本认证应该跟proxy相连接，并提供证书
  68.      //这将设置一个'Proxy-Authorization'头(header)，覆盖原来自定义的
  69.      proxy:{
  70.          host:127.0.0.1,
  71.          port:8080,
  72.          auth:{
  73.              username:'simon',
  74.              password:'123456'    
  75.          }    
  76.      },   
  78.      //取消请求
  79.      cancelToken: new CancelToken(cancel=>{})    
  80. }