一：介绍

axios 是一个轻量的 HTTP客户端
基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。

特性

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

基本使用

安装

  1. // 项目中安装
  2. npm install axios --S
  3. // cdn 引入
  4. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

导入 

  1. import axios from 'axios'

使用

  1. axios({        
  2.   url:'xxx',    // 设置请求的地址
  3.   method:"GET", // 设置请求方法
  4.   params:{      // get请求使用params进行参数凭借,如果是post请求用data
  5.     type: '',
  6.     page: 1
  7.   }
  8. }).then(res => {  
  9.   // res为后端返回的数据
  10.   console.log(res);   
  11. })

二：封装

问题

随着项目规模增大，如果每次发起一次HTTP请求，就要把这些比如设置超时时间，设置请求头，根据项目环境判断使用哪个请求地址，错误处理等操作，都要重复写。

例子

  1. axios('http://localhost:3000/data', {
  2.   // 配置代码
  3.   method: 'GET',
  4.   timeout: 1000,
  5.   withCredentials: true,
  6.   headers: {
  7.     'Content-Type': 'application/json',
  8.     Authorization: 'xxx',
  9.   },
  10.   transformRequest: [function (data, headers) {
  11.     return data;
  12.   }],
  13.   // 其他请求配置...
  14. })
  15. .then((data) => {
  16.   // todo: 真正业务逻辑代码
  17.   console.log(data);
  18. }, (err) => {
  19.   // 错误处理代码  
  20.   if (err.response.status === 401) {
  21.   // handle authorization error
  22.   }
  23.   if (err.response.status === 403) {
  24.   // handle server forbidden error
  25.   }
  26.   // 其他错误处理.....
  27.   console.log(err);
  28. });

封装实践

  • 设置接口请求前缀：根据开发、测试、生产环境的不同，前缀需要加以区分
  • 请求头 : 来实现一些具体的业务，必须携带一些参数才可以请求(例如：会员业务)
  • 状态码: 根据接口返回的不同status ， 来执行不同的业务，这块需要和后端约定好
  • 请求方法：根据get、post等方法进行一个再次封装，使用起来更为方便
  • 请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问
  • 响应拦截器： 这块就是根据 后端`返回来的状态码判定执行不同业务

设置接口请求前缀

利用node环境变量来作判断，用来区分开发、测试、生产环境

  1. if (process.env.NODE_ENV === 'development') {
  2.   axios.defaults.baseURL = 'http://dev.xxx.com'
  3. } else if (process.env.NODE_ENV === 'production') {
  4.   axios.defaults.baseURL = 'http://prod.xxx.com'
  5. }

在本地调试的时候，还需要在vue.config.js文件中配置devServer实现代理转发，从而实现跨域

  1. devServer: {
  2.     proxy: {
  3.       '/proxyApi': {
  4.         target: 'http://dev.xxx.com',
  5.         changeOrigin: true,
  6.         pathRewrite: {
  7.           '/proxyApi': ''
  8.         }
  9.       }
  10.     }
  11.   }

设置请求头与超时时间

大部分情况下，请求头都是固定的，只有少部分情况下，会需要一些特殊的请求头，那么这里将普适性的请求头作为基础配置。当需要特殊请求头时，将特殊请求头作为参数传入，覆盖基础配置。

  1. const service = axios.create({
  2.     ...
  3.     timeout: 30000,  // 请求 30s 超时
  4.       headers: {
  5.         get: {
  6.           'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
  7.           // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
  8.         },
  9.         post: {
  10.           'Content-Type': 'application/json;charset=utf-8'
  11.           // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
  12.         }
  13.   },
  14. })

并发请求以及场景

axios.all
https://segmentfault.com/a/1190000019882188
https://blog.csdn.net/aa_mmnn/article/details/105405893

文章
https://juejin.cn/post/6844903652881072141#heading-10
https://segmentfault.com/q/1010000016811552