From 0537d3d054ec1c262bbb425ccb7f78110688f674 Mon Sep 17 00:00:00 2001 From: GGupzhh <1248023357@qq.com> Date: Mon, 19 Oct 2020 18:09:27 +0800 Subject: [PATCH 1/2] feature(axios :shield:) --- src/modules/DemoTest/api/index.js | 3 +- src/modules/DemoTest/store/index.js | 9 ++-- src/utils/request.js | 64 +++++++++++++++++++++++++---- 3 files changed, 62 insertions(+), 14 deletions(-) diff --git a/src/modules/DemoTest/api/index.js b/src/modules/DemoTest/api/index.js index 15b7166..9aaee4d 100755 --- a/src/modules/DemoTest/api/index.js +++ b/src/modules/DemoTest/api/index.js @@ -4,7 +4,8 @@ export function getDemoTestList (params) { return request({ url: '/api/demo_test/list', method: 'get', - params + params, + redirect: '404' }) } diff --git a/src/modules/DemoTest/store/index.js b/src/modules/DemoTest/store/index.js index e044e49..3771f06 100755 --- a/src/modules/DemoTest/store/index.js +++ b/src/modules/DemoTest/store/index.js @@ -16,10 +16,11 @@ const DemoTestModule = { // TODO: 模拟响应时间 await sleep(1000) // TODO: 模拟 api - // const result = await getDemoTestList(params) - const result = { - test: 'ok' - } + const result = await getDemoTestList(params) + // const result = { + // test: 'ok' + // } + console.log(result) commit(MUTATION.SET_DEMO_LIST, result) return result } diff --git a/src/utils/request.js b/src/utils/request.js index 108e8d8..d4057db 100755 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -3,13 +3,19 @@ import { Message } from 'element-ui' import { getCookieToken } from '@/utils/cookie' import { camelizeKeys, decamelizeKeys } from '@/utils/camelCase' +import router from '@/router/index' +// redirect error +function errorRedirect (url) { + router.push(`/${url}`) +} // code Message const codeMessage = { 200: '服务器成功返回请求的数据。', 201: '新建或修改数据成功。', 202: '一个请求已经进入后台排队（异步任务）。', 204: '删除数据成功。', + 206: '进行范围请求成功。', 400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。', 401: '用户没有权限（令牌、用户名、密码错误）。', 403: '用户得到授权，但是访问是被禁止的。', @@ -25,32 +31,60 @@ const codeMessage = { // 创建axios实例 const service = axios.create({ - baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url - timeout: 15000 // 请求超时时间 + // api 的 base_url + baseURL: process.env.VUE_APP_BASE_API, + // 请求超时时间 + timeout: 15000 }) // request拦截器 service.interceptors.request.use( - config => { - config.data = decamelizeKeys(config.data) - config.params = decamelizeKeys(config.params) + request => { + // Conversion of hump nomenclature + request.data = decamelizeKeys(request.data) + request.params = decamelizeKeys(request.params) + + /** + * 让每个请求携带自定义 token + * 请根据实际情况自行修改 + */ if (getCookieToken()) { - config.headers.Authorization = `Bearer ${getCookieToken()}` // 让每个请求携带自定义 token 请根据实际情况自行修改 + request.headers.Authorization = `Bearer ${getCookieToken()}` } - return config + return request }, error => { - Promise.reject(error) + return Promise.reject(error) } ) // respone拦截器 service.interceptors.response.use( response => { + /** + * response data + * { + * data: {}, + * msg: "", + * error: 0 0 success | 1 error | 5000 failed | HTTP code + * } + */ + + // Conversion of hump nomenclature const data = response.data return camelizeKeys(data) }, error => { + /** + * 在需要重定向的接口中传入 redirect字段 值为要跳转的路由 + * redirect之后 调用接口的地方会继续执行 + * 因为此时 response error + * 所以需要前端返回一个前端构造好的数据结构 避免前端业务部分逻辑出错 + * 不重定向的接口则不需要传 + */ + if (error.config.redirect) { + errorRedirect(error.config.redirect) + } if (error.response) { Message({ message: codeMessage[error.response.status] || error.response.data.message, @@ -58,14 +92,26 @@ service.interceptors.response.use( duration: 3 * 1000, showClose: true }) + // 某些特定的接口 404 500 需要跳转 + return { + data: {}, + error: error.response.status, + msg: codeMessage[error.response.status] || error.response.data.message + } } else { + // failed Message({ message: error.message, type: 'error', duration: 5 * 1000, showClose: true }) - return Promise.reject(error) + // 某些特定的接口 failed 需要跳转 + return { + data: {}, + error: 5000, + msg: '服务请求不可用，请重试或检查您的网络。' + } } } ) From 5d0d75b199a6edb016717c202809af40b4eb18f8 Mon Sep 17 00:00:00 2001 From: GGupzhh <1248023357@qq.com> Date: Mon, 19 Oct 2020 18:16:33 +0800 Subject: [PATCH 2/2] fix(pr :v:) --- src/utils/request.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/utils/request.js b/src/utils/request.js index d4057db..632cfee 100755 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -3,11 +3,11 @@ import { Message } from 'element-ui' import { getCookieToken } from '@/utils/cookie' import { camelizeKeys, decamelizeKeys } from '@/utils/camelCase' -import router from '@/router/index' +import Router from '@/router/index' // redirect error function errorRedirect (url) { - router.push(`/${url}`) + Router.push(`/${url}`) } // code Message const codeMessage = { @@ -76,6 +76,7 @@ service.interceptors.response.use( }, error => { /** + * 某些特定的接口 404 500 需要跳转 * 在需要重定向的接口中传入 redirect字段 值为要跳转的路由 * redirect之后 调用接口的地方会继续执行 * 因为此时 response error @@ -92,7 +93,6 @@ service.interceptors.response.use( duration: 3 * 1000, showClose: true }) - // 某些特定的接口 404 500 需要跳转 return { data: {}, error: error.response.status,