乐趣区

vue中使用axios对同一个接口连续请求导致返回数据混乱的问题

jiezi

业务上出现一个问题：如果连续对同一个接口发出请求，参数不同，有时候先请求的比后请求的返回数据慢，导致数据顺序混乱，或者数据被覆盖的问题，所以需要控制请求的顺序。

解决方法:

1. 直接跟后台沟通，将所有参数放到数组里后台统一接收并返回所有数据再由前端进行数据的拆分使用。

2. 对于出现返回的数据混乱问题。
假设场景：页面中需要对三个部门请求对应的部门人员，三个部门人员的数据为一个二维数组，连续发送请求，但由于返回数据的顺序不定，导致数组中的数据顺序不是按照部门的顺序。
解决方法：使用 promise.all + axios。

// 获取部门人员的请求
getDepartPerson (departData) {
        let that = this
        return new Promise(function(resolve,reject) {
          that.$axios({
              method: 'get',
              url: ...,
              params: {...}
            }).then(res => {
              const data = res.data.map(item => {
                return {
                  value: item.userId,
                  label: item.userName
                }
              })
              resolve(data)
            })
        })
        
      },
      
// 使用 promise.all 控制返回的数据顺序
setPersonData() {
        const data = [{
          departId: 1,
          departName: '部门 1'
        }, {
          departId: 2,
          departName: '部门 2'
        }, {
          departId: 3,
          departName: '部门 3'
        }]
        let promise1 = this.getDepartPerson(data[0])
        let promise2 = this.getDepartPerson(data[1])
        let promise3 = this.getDepartPerson(data[2])
        console.log(promise1,promise2,promise3)
        let that = this
        Promise.all([promise1,promise2,promise3]).then(value => {console.log(value) //value 返回的数据是按顺序的
        })
      },

这里要注意
在 promise 中 this 不能指向 vue 的，所以在 promise 使用前赋值

let that = this

3. 对于返回数据出现覆盖的问题
假设场景：切换菜单的时候总是会向后台发送同一个请求，不同参数。且假设这几个菜单共用 vuex 中的一个 state，假设从 a 菜单切换到 b 菜单中，a 返回的数据比 b 返回的慢，导致覆盖了 state，此时虽然切换到 b 菜单，但是页面上的数据是 a 的数据。

解决方法：使用 axios 中的 CancelToken，对于之前的请求进行禁止。

// 取消接口相同参数不同的处于 pending 状态下的请求
export const pending = []
let CancelToken = axios.CancelToken
let cancelPending = (config) => {for(let i=pending.length-1; i>=0; i--){if (!!config) {if (pending[i].u === config.url && pending[i].delPending) {console.log('delete request')
        pending[i].f() // 取消请求
        pending.splice(i, 1) // 移除当前请求记录
      }
    } else {pending[i].f() // 取消请求
      pending.splice(i, 1) // 移除当前请求记录
    }
  }
}

接着在请求前进行拦截

/**
 * 请求前拦截
 */
export function requestSuccessFunc (config) {cancelPending(config)
  config.cancelToken = new CancelToken((c) => {pending.push({'u': config.url, 'f': c, delPending: config.delPending})
  })
  return config
}

/**
 * 请求结果预处理
 * @param response
 * @returns {Promise<never>}
 */
export function responseSuccessFunc (response) {cancelPending(response.config)
}

拓展：如果在切换路由的时候可以将之前页面中请求处于 pengding 状态的取消

export function routerAfterEachFunc () {
  // 这里可以做路由后操作
  // 切换路由时取消之前页面处于 pending 的请求
  for(let i=pending.length-1; i>=0; i--){pending[i].f() // 取消请求
    pending.splice(i, 1) // 移除当前请求记录
  }
  console.log(pending)
}

....

const ROUTER = new Router({routes: CONST_ROUTER})
ROUTER.afterEach(routerAfterEachFunc)
export default ROUTER

4. 假设这里不是请求同一个接口，而是上一个接口返回的数据作为下一个接口请求的参数，这是可以使用 async await

退出移动版