/src/utils/request.ts：axios 请求封装，适用于需要统一处理请求和响应的场景

文章目录

- - 数据结构解释
  - 1. 核心功能
  - 2. 代码结构分析
  - - 请求拦截器
    - 响应拦截器
  - 3. 改进建议
  - 4. 总结

console.log('Intercepted Response:', JSON.stringify(response));

{"data": {"code": 0,"msg": "成功","data": {"id": 76,"inviteCode": "957989","invitorId": 56,"remark": "测试","generatedDate": "2025-01-08T16:55:27.163","expireTime": "2025-01-15T16:55:27.163","inviteLevel": 2,"status": 0,"boundPhone": null,"weixinNickname": null,"weixinHeadimg": null,"boundWxUid": null,"adminId": null,"userId": null,"isLocked": 0,"createdDate": "2025-01-08T16:55:27.163","lastModifiedDate": "2025-01-08T16:55:27.163"}},"status": 200,"statusText": "","headers": {"cache-control": "no-cache, no-store, max-age=0, must-revalidate","content-type": "application/json;charset=UTF-8","expires": "0","pragma": "no-cache"},"config": {"url": "/api/invite-codes/generate","method": "post","params": {"invitorId": 56,"remark": "测试"},"headers": {"Accept": "application/json, text/plain, */*","token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI1NiIsInJvbGUiOiJST0xFX0NPTVBBTllfU1VQRVIiLCJleHAiOjE3MzY0MDA5MDMsInVzZXJOYW1lIjoiMTg2NjE5Nzc1ODEiLCJ0eXBlIjoiYWRtaW4iLCJpYXQiOjE3MzYzMTQ1MDN9.OBFnxtoE4A2RO6gAcVm_CUkvJl_j6wpUkOPZOZySwEk"},"baseURL": "http://127.0.0.1:8087/","transformRequest": [null],"transformResponse": [null],"timeout": 0,"withCredentials": false,"xsrfCookieName": "XSRF-TOKEN","xsrfHeaderName": "X-XSRF-TOKEN","maxContentLength": -1},"request": {}
}

数据结构解释

data: 包含实际业务响应数据，其中：
- code: 响应码，0 表示成功。
- msg: 响应消息。
- data: 具体数据，包括邀请码的详细信息。
status: HTTP 状态码，200 表示请求成功。
headers: 响应头信息。
config: 请求配置详情，包括 URL、请求方法、参数、头部信息等。
request: 请求对象，具体内容在此为空。

如需对其中的字段进行详细解析，请告知我！ 😊

// spid-admin/src/utils/request.ts
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import { UserModule } from '@/store/modules/user'
import { api } from '@/utils/public-path'let logoutCount:number = 0
const service = axios.create({baseURL: api, // url = base url + request urltimeout: 0,withCredentials: false // send cookies when cross-domain requests
})// Request interceptors
service.interceptors.request.use((config) => {// Add X-Access-Token header to every request, you can add other custom headers hereif (UserModule.token) {const { token }: any = JSON.parse(UserModule.token)config.headers['token'] = token}//console.log('Request config:', config); // 添加这行代码return config},(error) => {Promise.reject(error)}
)// Response interceptors
service.interceptors.response.use((response) => {//console.log('Intercepted Response:', JSON.stringify(response));//console.log('Full Response Data:', JSON.stringify(response, null, 2));// Some example codes here:// You can change this part for your own usage.// status == 200: success// code === 0: success// code === 1: invalid access tokenconst res = response.dataif (res.code !== 0) {if (res.code === 1) {Message({message: res.msg || 'Error',type: 'warning',duration: 5 * 1000})return response.data} else if (res.code === 7) {MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录','确定登出',{confirmButtonText: '重新登录',cancelButtonText: '取消',type: 'warning'}).then(() => {logoutCount = 0localStorage.clear()sessionStorage.clear()UserModule.ResetToken()location.reload() // To prevent bugs from vue-router})} else if (res.indexOf('form') !== -1) {// 支付宝支付 ....... 为什么不改造成正常接口呢 不理解return Promise.resolve(res)} else {Message({message: res.msg || 'Error',type: 'error',duration: 5 * 1000})return Promise.reject(new Error(res.msg || 'Error'))}} else {return response.data}},(error) => {console.log(error)let errorInfo = error.responselet msgif (!errorInfo) {const { request: { statusText, status }, config } = JSON.parse(JSON.stringify(error))errorInfo = {statusText,status,request: { responseURL: config.url }}msg = status + '：' + errorInfo.statusText} else {if (error.response.data.code === -1) {if (logoutCount === 0) {MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录','确定登出',{confirmButtonText: '重新登录',cancelButtonText: '取消',type: 'warning'}).then(() => {logoutCount = 0localStorage.clear()sessionStorage.clear()UserModule.ResetToken()location.reload() // To prevent bugs from vue-routermsg = error.response.data.msg})logoutCount++return}} else if (errorInfo.data.code === 1 || errorInfo.data.code === 2) {msg = errorInfo.data.msg} else {msg = error.response.data.status + '：' + error.response.data.message}}Message({message: msg,type: 'error',duration: 5 * 1000})return Promise.reject(msg)}
)export default service

这段代码是一个基于 axios 的请求封装，主要用于处理 HTTP 请求的拦截和响应拦截。它结合了 Element UI 的消息提示和弹窗组件，实现了以下功能：

1. 核心功能

请求拦截：
- 在请求发送之前，检查用户是否已登录（通过 UserModule.token）。
- 如果用户已登录，将 token 添加到请求头中。
响应拦截：
- 对响应数据进行统一处理，根据返回的 code 值判断请求是否成功。
- 处理特定的错误码（如 code === 1 或 code === 7），并显示相应的提示信息。
- 在用户登录状态失效时，弹出确认框提示用户重新登录。

2. 代码结构分析

请求拦截器

service.interceptors.request.use((config) => {if (UserModule.token) {const { token }: any = JSON.parse(UserModule.token);config.headers['token'] = token;}return config;},(error) => {Promise.reject(error);}
);

功能：
- 在每次请求发送之前，检查用户是否已登录。
- 如果已登录，将 token 添加到请求头中。
注意：
- UserModule.token 是从 Vuex 模块中获取的，需要确保 UserModule 已正确初始化。

响应拦截器

service.interceptors.response.use((response) => {const res = response.data;if (res.code !== 0) {if (res.code === 1) {Message({message: res.msg || 'Error',type: 'warning',duration: 5 * 1000,});return response.data;} else if (res.code === 7) {MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录','确定登出',{confirmButtonText: '重新登录',cancelButtonText: '取消',type: 'warning',}).then(() => {logoutCount = 0;localStorage.clear();sessionStorage.clear();UserModule.ResetToken();location.reload(); // To prevent bugs from vue-router});} else if (res.indexOf('form') !== -1) {// 支付宝支付 ....... 为什么不改造成正常接口呢 不理解return Promise.resolve(res);} else {Message({message: res.msg || 'Error',type: 'error',duration: 5 * 1000,});return Promise.reject(new Error(res.msg || 'Error'));}} else {return response.data;}},(error) => {console.log(error);let errorInfo = error.response;let msg;if (!errorInfo) {const { request: { statusText, status }, config } = JSON.parse(JSON.stringify(error));errorInfo = {statusText,status,request: { responseURL: config.url },};msg = status + '：' + errorInfo.statusText;} else {if (error.response.data.code === -1) {if (logoutCount === 0) {MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录','确定登出',{confirmButtonText: '重新登录',cancelButtonText: '取消',type: 'warning',}).then(() => {logoutCount = 0;localStorage.clear();sessionStorage.clear();UserModule.ResetToken();location.reload(); // To prevent bugs from vue-routermsg = error.response.data.msg;});logoutCount++;return;}} else if (errorInfo.data.code === 1 || errorInfo.data.code === 2) {msg = errorInfo.data.msg;} else {msg = error.response.data.status + '：' + error.response.data.message;}}Message({message: msg,type: 'error',duration: 5 * 1000,});return Promise.reject(msg);}
);

功能：
- 对响应数据进行统一处理。
- 根据返回的 code 值判断请求是否成功，并显示相应的提示信息。
- 处理特定的错误码（如 code === 1 或 code === 7），并在用户登录状态失效时弹出确认框提示用户重新登录。
注意：
- code === 7 表示用户登录状态失效，会清除本地存储并刷新页面。
- code === 1 表示请求失败，会显示警告信息。
- 其他错误码会显示错误信息。

3. 改进建议

支付宝支付逻辑：
- 代码中提到 res.indexOf('form') !== -1 是处理支付宝支付的逻辑，但注释中提到“为什么不改造成正常接口呢不理解”。建议将支付宝支付逻辑改造为标准的接口返回格式，以便统一处理。
错误处理：
- 在 error.response 为空时，手动构造错误信息。可以考虑使用更健壮的方式处理网络错误。
logoutCount 的作用：
- logoutCount 用于防止多次弹出登录失效的确认框。可以考虑使用更优雅的方式实现，例如在 Vuex 中维护登录状态。