fix: 完善axios响应拦截器中错误处理

src/api/index.js

@@ -13,6 +13,8 @@
  * let xx = await this.$api.getBanner({}, {timeout: 1000, headers:{ aaa: 111 }})
  */
 import { request } from '@/plugins/axios/index'
+import qs from 'qs'
+console.log('qs:', qs)
 
 const apiMap = {
     getBanner: { method: 'get', url: '/home/banner' },
@@ -29,7 +31,7 @@ function injectRequest(apiObj) {
             return request({
                 method,
                 url,
-                [keyName]: dataOrParams,
+                [keyName]: method === 'POST' ? qs.stringify(dataOrParams) : dataOrParams,
                 ...Object.assign(config || {}, instanceConf)
             })
         }

src/main.js

@@ -15,7 +15,6 @@ import filters from '@/filters/index.js'
 import directives from '@/directives/index.js'
 import utils from '@/utils/index.js'
 
-console.log('process.env:', process.env)
 // 全局注册layout组件
 Vue.use(layoutComponents)
 // 注册自定义全局组件

src/plugins/axios/axios copy.js

@@ -7,7 +7,6 @@ import handleStatus from '@/plugins/axios.handleStatus.js'
 /**
  * 默认配置
  */
-console.log('axios-process.env:', process.env)
 axios.defaults.baseURL = process.env.VUE_APP_BASEURL
 axios.defaults.timeout = 10000
 axios.defaults.headers.common['a-laihua-defined-key'] = 'a customized value'

src/plugins/axios/index.js

@@ -7,10 +7,14 @@ import setOptions from '@/plugins/axios/axios.setOptions.js'
 // import store from '@/store/index'
 // import router from '@/router/index.js'
 // import { Message, Notification } from 'element-ui'
-// import qs from 'qs'
-// console.log('qs:',qs)
 
-console.log('axios-process.env:', process.env)
+// const tip = msg => {
+//     Message({
+//         message: msg,
+//         duration: 1000,
+//         type: "error"
+//     });
+// }
 
 // /**
 //  * 默认配置
@@ -29,8 +33,7 @@ let conf = {}
 const requestInterceptors = request.interceptors.request.use(
     (config) => {
         request.config = Object.assign({}, config)
-        console.log('config:', config)
-        console.log('pendingPool:', pendingPool)
+        // console.log('config:', config)
         // 在发送请求之前做些什么
         // config.headers.common['cookie-id'] = cookieId
         config.cancelToken = new axios.CancelToken((cancelFn) => {
@@ -49,28 +52,90 @@ const requestInterceptors = request.interceptors.request.use(
  */
 const responseInterceptors = request.interceptors.response.use(
     (response) => {
+        console.log('响应response suc:', response)
         const { config } = response
         pendingPool.delete(config.url)
-        if (response.status === 200) {
-            return Promise.resolve(response)
-        } else {
-            return Promise.reject(response)
-        }
+
+        return response.status === 200 ? Promise.resolve(response) : Promise.reject(response)
         // return Promise.resolve(handleStatus(response))
     },
     // 对响应错误做点什么
     (err) => {
         console.log('响应拦截err:', err)
-        console.log('pendingPool2:', pendingPool)
-        console.log('axios.isCancel(err):', axios.isCancel(err))
+        console.log('err.stack:', err.stack)
+        console.log('err.response:', err.response)
         console.log('err.response.status:', err.response.status)
-        // 错误信息err传入isCancel方法，可以判断请求是否被取消
-        if (axios.isCancel(err)) {
-            throw new axios.Cancel(err.message || '请求被主动取消')
-        } else {
-            console.log('网络请求失败，请重试:')
-            pendingPool.delete(conf.url)
+        // console.log('err.response.data:',err.response.data)
+        console.log('err.response.data.code:', err.response.data.code)
+        console.log('err.response.data.message:', err.response.data.message)
+        console.log('axios.isCancel(err):', axios.isCancel(err))
+
+        // let {response} = err
+        // if (response) {
+        //     // 请求已发出，但是不在2xx的范围
+        //     errorHandle(response.status, response.data.message);
+        //     return Promise.reject(response);
+        // } else {
+        //     // 处理断网的情况
+        //     // eg:请求超时或断网时，更新state的network状态
+        //     // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
+        //     // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
+        //     store.commit('changeNetwork', false);
+        // }
+
+        if (err.reponse && err.response.status) {
+            switch (err.response.status) {
+                case 400:
+                    err.message = '请求错误(400)'
+                    break
+                case 401:
+                    err.message = '未授权，请重新登录(401)'
+                    break
+                case 403:
+                    err.message = '拒绝访问(403)'
+                    break
+                case 404:
+                    err.message = '请求出错(404)'
+                    break
+                case 408:
+                    err.message = '请求超时(408)'
+                    break
+                case 500:
+                    err.message = '服务器错误(500)'
+                    break
+                case 501:
+                    err.message = '服务未实现(501)'
+                    break
+                case 502:
+                    err.message = '网络错误(502)'
+                    break
+                case 503:
+                    err.message = '服务不可用(503)'
+                    break
+                case 504:
+                    err.message = '网络超时(504)'
+                    break
+                case 505:
+                    err.message = 'HTTP版本不受支持(505)'
+                    break
+                default:
+                    err.message = `连接出错(${err.response.status})!`
+            }
         }
+        // 获取不到状态码的情况
+        else {
+            // 错误信息err传入isCancel方法，可以判断请求是否被取消
+            if (axios.isCancel(err)) {
+                throw new axios.Cancel(err.message || '请求被主动取消')
+            }
+            if (err && err.stack.includes('timeout')) {
+                // 超时的情况下err.response为undefined
+                err.message = '请求超时!'
+            }
+            err.message = '连接服务器失败!'
+        }
+
+        pendingPool.delete(conf.url)
         return Promise.reject(err)
     }
 )

src/views/home.vue

@@ -56,7 +56,12 @@ export default {
     },
     created() {},
     async mounted() {
-        let xx = await this.$api.getBanner({ pageSize: 20, pIndex: 2 })
+        let xx = await this.$api.getBanner(
+            { pageSize: 20, pIndex: 2 },
+            {
+                // timeout:1
+            }
+        )
         console.log('xx:', xx)
         let vv = await this.$api.login({ account: '18038018084', psw: '123456' })
         console.log('vv:', vv)