封装的axios实现取消请求

背景

业务中，在tab切换的时候会发起请求，拿到结果再展示再视图中，此时快速切换tab并且接口返回较慢会导致视图数据错乱情况。

方案

针对这种情况，可以在第二次请求的时候把第一次的取消掉。以axios库和vue的项目为例，一般的项目重新封装axios，所有的请求都会走这个axios的实例，那么就需要在全局axios的请求拦截中添加取消请求

代码实现

封装的axios中：

const http= axios.create()

http.interceptors.request.use(
  config => {
    config.cancelToken = new axios.CancelToken(cancel => {
      // 存入一个cancel token
      store.commit('addCancelToken', cancel)
    })
  },
  error => {...}
)

http.interceptors.response.use(
  response => {...},
  error => {
    // 拦截axios错误
    if (error instanceof axios.Cancel) return
    ...
  }
)

vuex中：

// store
state: {
  cancelTokenList: []
},
mutations: {
  addCancelToken(state, payload) {
    const maxCancelTokenNum = 15 // 最大存cancelToken条数
    if (state.cancelTokenList.length >= maxCancelTokenNum) {
        state.cancelTokenList.shift();
      }
    state.cancelTokenList.push(payload)
  },
  deleteCancelToken(state, payload) {
    state.cancelTokenList.splice(payload, 1)
  }
}

使用：

// 路由切换中使用
router.beforeEach((to, from, next) => {
  cancelTokenList.forEach((cancel ,index) => {
    cancel()
    deleteCancelToken(index)
  })
})

// 某一个请求发起前用
getData() {
 cancelTokenList.forEach((cancel ,index) => {
    cancel()
    deleteCancelToken(index)
  })
  //发起请求
  http...
}

总结

或许很少用到这个取消请求这个功能，但是不能不会！！