axios封装（例如：请求头、token、超时、BaseUrl、请求错误、请求重复）_axios封装请求头

axios封装

---

---

前言

1.为什么封装Axios

封装 Axios 是一种常见的做法，以提高前端项目的代码可维护性和可重用性。在这篇博客中，我将向您介绍如何使用 Axios来进行网络请求，并将其封装成一个可重用的模块，以便在整个项目中使用。

2.包括的功能

1. 创建 Axios 实例
2. 请求拦截器
3. 响应拦截器
4. 全局错误处理
5. 设置用户权限令牌
6. 生成请求键
7. 根据环境设置 baseURL
8. API 方法：提供了一组 API 方法，包括设置自定义请求头、发起 GET、POST、PUT 和 DELETE 请求

一、Axios是什么？

Axios 是一个流行的 JavaScript 库，用于进行 HTTP 请求。它可以在浏览器和 Node.js 环境中使用，提供了一种简单而强大的方式来与后端服务器进行通信。Axios 具有许多有用的功能，如拦截器、异步请求和请求取消等。

二、安装 Axios

1. 安装axios （JavaScript版本）

//安装axios（javascript版本）
npm install axios

1
2
3

2. 安装axios （TypeScript版本）

//安装axios（typescript版本）
npm install axios @types/axios

1
2
3

三、封装 Axios

1.axios （JavaScript版本）

代码如下（示例）：

import axios, {
   
  AxiosInstance,
  AxiosRequestConfig,
  AxiosResponse,
  AxiosError,
  CancelTokenSource,
} from "axios";

let userToken = '';  // 用于存储用户的权限token

// 创建 Axios 实例
const defaultAxiosConfig = {
   
  timeout: 10000,  // 请求超时时间为10秒
  // 添加其他默认配置项
};

function createAxiosInstance(options = {
   }) {
   
  const instance = axios.create({
    ...defaultAxiosConfig, ...options });

  // 请求拦截器，添加用户令牌到请求头
  instance.interceptors.request.use(config => {
   
    if (userToken) {
   
      config.headers.Authorization = `Bearer ${
     userToken}`;
    }

    return config;
  }, error => {
   
    // 处理请求错误
    return Promise.reject(handleGlobalError(error));
  });

  // 响应拦截器，处理全局错误
  instance.interceptors.response.use(response => {
   
    const requestKey = generateReqKey(response.config);
    pendingRequests.delete(requestKey);
    return response.data;
  }, error => {
   
    // 处理响应错误
    return Promise.reject(handleGlobalError(error));
  });

  return instance;
}

// 处理全局错误
function handleGlobalError(error) {
   
  if (error.response) {
   
    switch (error.response.status) {
   
      case 401:
        return "错误：缺少身份信息";
      case 403:
        return "错误：没有权限";
      case 404:
        return "错误：资源未找到";
      case 500:
        return "错误：服务器内部错误";
      default:
        return "服务器响应错误：" + (error.response.data.message || "未知错误");
    }
  } else if (error.request) {
   
    if (error.code === 'ECONNABORTED') {
   
      return "请求超时";
    }
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78