VUE3（十六）封装axios_vue3 nprogress+axios二次 封装

一：axios 基础

从浏览器中创建XMLHttpRequest

从node.js发出http请求

支持Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防止CSRF/XSRF

二：axios封装

关于Axios的封装这部分涉及到与后端的一些约定。

什么约定呢？就是在我们请求接口的时候，后端会返回给我们一个code。

在我开发的时候，一般约定

code：-200为登录失效状态
code：-100为接口发生错误状态。（为了避免服务器端接口报错导致前端无法运行的情况发生，我的习惯通常是在后端的接口加上try{}catch(){} 来避免接口报错）
code > 0 接口返回成功值
code < 0 接口返回失败值
1
2
3
4

这样，我们就可以在封装axios的时候提前通过请求返回值code做一些预处理。

1：引入axios

import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
1

2：设置请求超时

通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等。

// 超时时间（ms）
axios.defaults.timeout = 2000 * 1000;
1
2

3：post请求头的设置

post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8

// axios 请求头
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers['token'] = localStorage.getItem('token') || ''
axios.defaults.headers.post['Content-Type'] = 'application/json'
1
2
3
4

4：请求拦截

我们在发送请求前可以进行一个请求的拦截，为什么要拦截呢，

我们拦截请求是用来做什么的呢？

比如，有些请求是需要用户登录之后才能访问的，或者post请求的时候，我们需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。

// 请求拦截
axios.interceptors.request.use(
  (config: AxiosRequestConfig) => { 
    // 可在这里做一些数据的校验。
    // session的校验等。
    return config 
  },
  (error: AxiosError) => { 
    return error 
  }
)
1
2
3
4
5
6
7
8
9
10
11

5：响应拦截

响应拦截器很好理解，就是我在最开始的时候说的那部分和后端的约定，约定好几个固定的状态码，按需执行对应的操作就好。

当然，服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理。

例如上面的思想：如果后台返回的状态码是200，则正常返回数据，否则的根据错误的状态码类型进行一些我们需要的错误。

其实这里主要就是进行了错误的统一处理和没登录或登录过期后调整登录页的一个操作。

// 响应拦截
axios.interceptors.response.use((result: AxiosResponse) => {
  // ===========================================================
  // 返回方式一
  /*console.log(result);
  if (result.status === 200) {
    if (result.data && result.data.code > 0) {
      return Promise.resolve(result);
    } else {
      alert(result.data.msg || "操作失败");
      return Promise.reject(result);
    }
  } else {
    alert("网络异常");
    return Promise.reject(result);
  }//*/
 
  // ==========================================================
  // 返回方式二
  // 返回数据前做了什么
  // console.log(result);
  if (result.data.code < -100) 
  {
    if (result.data.msg)
    {
      // 调用自定义alert
      utils.alert(result.data.msg, function () {
        window.location.assign('/pc/index')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27