fix: aixos拦截器优化

src/api/index.js

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

src/plugins/axios/index.js

@@ -20,14 +20,13 @@ let request = setConfig(axios.create())
 
 // 请求中的api
 let pendingPool = new Map()
-// 当前请求的config，用于此请求的响应异常后在pendingPool中将其删除
-let conf = {}
 
 /**
  * 请求拦截
  */
 const requestInterceptors = request.interceptors.request.use(
     (config) => {
+        // 用于请求响应异常后在pendingPool中将其删除，否则异常的请求无法再发起
         request.config = Object.assign({}, config)
         // console.log('config:', config)
         // 在发送请求之前做些什么
@@ -48,15 +47,22 @@ 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)
 
+        console.log('响应response suc:', response)
+
         return Promise.resolve(handleResponse(response))
     },
     // 对异常响应处理
     (err) => {
+        const { config } = request
+        // 当响应异常，并且不是请求被取消的异常，才会将这个请求从pendingPool中删除
+        // 否则会出现一种情况：网速非常慢的情况下，在网速非常慢的情况下多次重复发送同一个请求，第一个请求还在pending状态中，
+        // 第二个请求发不出去会直接被cancel掉进入到异常响应，然后从pendignPool中删除，第三次请求发出的时候就无法正确判断这个请求是否还是pending状态会正常发出
+        if (!axios.isCancel(err)) pendingPool.delete(config.url)
+
+        console.log('request.config:', request.config)
         console.log('响应拦截err1:', err)
         console.log('err.stack:', err.stack)
         console.log('err.response:', err.response)
@@ -65,9 +71,8 @@ const responseInterceptors = request.interceptors.response.use(
         // 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))
-
         console.log('Array.from(pendingPool.keys()):', Array.from(pendingPool.keys()))
-        pendingPool.delete(conf.url)
+        console.log('pendingPool:', pendingPool.keys())
 
         if (!err) return Promise.reject(err)
 
@@ -80,7 +85,7 @@ const responseInterceptors = request.interceptors.response.use(
             console.log('else err===:', err)
             // 错误信息err传入isCancel方法，可以判断请求是否被取消
             if (axios.isCancel(err)) {
-                throw new axios.Cancel(err.message || '请求被主动取消')
+                throw new axios.Cancel(err.message || '请求被取消')
             }
             if (err.stack.includes('timeout')) {
                 // 超时的情况下err.response为undefined

src/router/index.js

@@ -56,7 +56,7 @@ const router = new VueRouter({
 
 // 路由全局前置守卫
 router.beforeEach((to, from, next) => {
-    // 路由变化时取消所有非全局的pending状态的请求
+    // 路由变化时取消当前所有非全局的pending状态的请求
     request.clearPendingPool()
     // 未登录情况下访问的页面需要登录，自动跳转到指定页面（登录页）
     if (to.meta.needAuth && !store.getters['authed']) next({ name: 'page2' })

src/views/home.vue

@@ -25,7 +25,7 @@
         </svg>
         <div
             style="width:auto;height: 100px;border: 1px solid pink;margin-top:10px"
-            @click="aaa">
+            @click="aaa()">
             发送请求 d
         </div>
         <div
@@ -84,8 +84,9 @@ export default {
         //     console.log('eee:',eee)
         // })
         // console.log('vv:', vv)
-        this.$api.getBanner()
-        this.$api.getBanner()
+        // this.$api.getBanner({},{timeout: 1})
+        // this.$api.getBanner({},{timeout: 1})
+        // this.$api.login({ account: '18038018084', psw: '123456' })
     },
     methods: {
         async aaa() {