From fdc49f6dcc824329ffe1942c521a74a2a842d8d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E4=BC=A0=E9=BE=99?= Date: Fri, 3 Jun 2022 19:49:38 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84axios=E5=B0=81?= =?UTF-8?q?=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/http/index.js | 16 ++-- src/utils/http/interceptors.js | 136 ++++++++++++++++----------------- 2 files changed, 77 insertions(+), 75 deletions(-) diff --git a/src/utils/http/index.js b/src/utils/http/index.js index 2b40af4..089cb49 100644 --- a/src/utils/http/index.js +++ b/src/utils/http/index.js @@ -1,13 +1,17 @@ import axios from 'axios' -import { setupInterceptor } from './interceptors' +import { repReject, repResolve, reqReject, reqResolve } from './interceptors' -function createAxios(option = {}) { - const defBaseURL = window.__APP__GLOB__CONF__?.VITE_APP_GLOB_BASE_API || import.meta.env.VITE_APP_GLOB_BASE_API +export function createAxios(options = {}) { + const defaultOptions = { + baseURL: window.__APP__GLOB__CONF__?.VITE_APP_GLOB_BASE_API || import.meta.env.VITE_APP_GLOB_BASE_API, + timeout: 12000, + } const service = axios.create({ - timeout: option.timeout || 120000, - baseURL: option.baseURL || defBaseURL, + ...defaultOptions, + ...options, }) - setupInterceptor(service) + service.interceptors.request.use(reqResolve, reqReject) + service.interceptors.response.use(repResolve, repReject) return service } diff --git a/src/utils/http/interceptors.js b/src/utils/http/interceptors.js index c922320..6a0cc5a 100644 --- a/src/utils/http/interceptors.js +++ b/src/utils/http/interceptors.js @@ -1,82 +1,80 @@ import { router } from '@/router' import { getToken, removeToken } from '@/utils/token' +import { isNullOrUndef } from '../is' import { isWithoutToken } from './helpers' -export function setupInterceptor(service) { - service.interceptors.request.use( - async (config) => { - // 防止缓存，给get请求加上时间戳 - if (config.method === 'get') { - config.params = { ...config.params, t: new Date().getTime() } - } +export function reqResolve(config) { + // 防止缓存，给get请求加上时间戳 + if (config.method === 'get') { + config.params = { ...config.params, t: new Date().getTime() } + } - // 处理不需要token的请求 - if (isWithoutToken(config)) { - return config - } + // 处理不需要token的请求 + if (isWithoutToken(config)) { + return config + } - const token = getToken() - if (token) { - /** - * * jwt token - * ! 认证方案: Bearer - */ - if (!config.headers.Authorization) config.headers.Authorization = 'Bearer ' + token + const token = getToken() + if (token) { + /** + * * jwt token + * ! 认证方案: Bearer + */ + if (!config.headers.Authorization) config.headers.Authorization = 'Bearer ' + token - return config - } - /** - * * 未登录或者token过期的情况下 - * * 跳转登录页重新登录，携带当前路由及参数，登录成功会回到原来的页面 - */ + return config + } + /** + * * 未登录或者token过期的情况下 + * * 跳转登录页重新登录，携带当前路由及参数，登录成功会回到原来的页面 + */ + const { currentRoute } = router + router.replace({ + path: '/login', + query: { ...currentRoute.query, redirect: currentRoute.path }, + }) + return Promise.reject({ code: '-1', message: '未登录' }) +} + +export function reqReject(error) { + return Promise.reject(error) +} + +export function repResolve(response) { + return response?.data +} + +export function repReject(error) { + let { code, message } = error.response?.data || {} + if (isNullOrUndef(code)) { + // 未知错误 + console.error('【err】' + error) + return Promise.reject({ code: -1, message: '接口异常！', error }) + } + /** + * TODO 此处可以根据后端返回的错误码自定义框架层面的错误处理 + */ + switch (code) { + case 401: + message = message || '未登录' + // * 处理未登录的情况 + removeToken() const { currentRoute } = router router.replace({ path: '/login', query: { ...currentRoute.query, redirect: currentRoute.path }, }) - return Promise.reject({ code: '-1', message: '未登录' }) - }, - (error) => Promise.reject(error) - ) - - service.interceptors.response.use( - (response) => response?.data, - (error) => { - let { code, message } = error.response?.data - return Promise.reject({ code, message }) - - /** - * TODO 此处可以根据后端返回的错误码自定义框架层面的错误处理 - */ - switch (code) { - case 401: - // 未登录（可能是token过期或者无效了） - console.error(message) - removeToken() - const { currentRoute } = router - router.replace({ - path: '/login', - query: { ...currentRoute.query, redirect: currentRoute.path }, - }) - break - case 403: - // 没有权限 - console.error(message) - break - case 404: - // 资源不存在 - console.error(message) - break - default: - break - } - // 已知错误resolve，在业务代码中作提醒，未知错误reject，捕获错误统一提示接口异常（9000以上为业务类型错误，需要跟后端确定好） - if ([401, 403, 404].includes(code) || code >= 9000) { - return Promise.resolve({ code, message }) - } else { - console.error('【err】' + error) - return Promise.reject({ message: '接口异常，请稍后重试！' }) - } - } - ) + break + case 403: + message = message || '没有权限' + // TODO 处理没有权限的情况 + break + case 404: + message = message || '资源或接口不存在' + // TODO 处理资源或接口不存在的情况 + break + default: + break + } + return Promise.resolve({ code, message }) }