Axios 二次封装详解

Axios 二次封装详解

在前端开发中，常常须要对网络请求进行一些定制化的处理。以下是关于一个 Axios 二次封装的详细介绍。
我一般把以下代码放到utils目录下创建request.js文件，以下是部分关键代码示例：

1. //引用axios实例
2. import axios from 'axios';
3. //引入配置
4. import config from '../api/confing';
5. //引入弹窗
6. import { ElMessage }from 'element-plus';
7. //引入路由，主要用于跳转
8. import router from '../router';
9. //引入缓存，主要用于token处理
10. import storage from './storage';
12. const TOKEN_INVALID = 'Token 认证失败,请重新登陆!';
13. const NETWORK_ERROR = '网络请求异常,请稍后重试!';
15. // 创建 axios 实例对象,添加全局配置
16. const service = axios.create({
17.     baseURL: config.baseApi,
18.     timeout: 8000
19. });
21. // 请求拦截
22. service.interceptors.request.use(
23.     config => {
24.         // 获取用户信息
25.         var userinfo = storage.getItem("userInfo");
26.         if (typeof(userinfo) == "undefined" || userinfo == '' || userinfo == null) {
27.         } else {
28.             config.headers['token'] = userinfo.token
29.         }
30.         return config
31.     },
32.     error => {
33.         console.log(error); // for debug
34.         return Promise.reject(error)
35.     }
36. );
38. // 响应拦截
39. service.interceptors.response.use((res) => {
40.     const { code, data, msg } = res.data;
41.     // 示例判断代码
42.     if (code === 1) {
43.         return data
44.     } else if (code === 40001 || code === 40003) {
45.         ElMessage.error(msg);
46.         setTimeout(() => {
47.             router.push('login')
48.         }, 150);
49.         return Promise.reject(TOKEN_INVALID)
50.     }  else if (code == 0) {
51.         ElMessage.error(msg);
52.         // 处理特殊情况的数据
53.     } else {
54.         ElMessage.error(msg || NETWORK_ERROR);
55.         return Promise.reject(msg || NETWORK_ERROR)
56.     }
57. });
59. // 请求核心函数
60. function request(options) {
61.     options.method = options.method || 'get';
62.     if (options.method.toLowerCase() === 'get') {
63.         options.params = options.data;
64.     }
65.     let isMock = config.mock;
66.     if(typeof options.mock!= 'undefined'){
67.         isMock = options.mock;
68.     }
69.     if (config.env == 'production') {
70.         service.defaults.baseURL =  config.mockApi
71.     } else if (config.env === 'prod') {
72.         service.defaults.baseURL = config.baseApi
73.     } else {
74.         service.defaults.baseURL = isMock? config.mockApi : config.baseApi
75.     }
76.     return service(options);
77. }
79. ['get', 'post', 'delete', 'patch'].forEach((item) => {
80.     request[item] = (url, data, options) => {
81.         return request({
82.             url,
83.             data,
84.             method: item,
85.            ...options
86.         })
87.     }
88. });
90. export default request;

复制代码

通过如许的二次封装，我们能够更加机动和方便地进行网络请求的管理和处理，提高了开发服从和代码的可维护性。
以上就是关于这个 Axios 二次封装的简单介绍，盼望对各人明白网络请求的处理有所资助。