Axios error response

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'
   })
 }
 

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
     }

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,47 +31,87 @@ 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 => {
+    /**
+     * 某些特定的接口 404 500 需要跳转
+     * 在需要重定向的接口中传入 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,
         type: 'error',
         duration: 3 * 1000,
         showClose: true
       })
+      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: '服务请求不可用，请重试或检查您的网络。'
+      }
     }
   }
 )