axios使用-页面切换时清除上个页面所有未完成的请求

原创已于 2022-05-17 10:22:35 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

于 2022-05-17 10:15:15 首次发布

本文介绍了如何在Vue应用中利用AbortController来取消axios请求，以防止页面切换时未完成请求的影响。在每个请求时创建新的AbortController实例，并将其存储在Vuex中。当路由切换时，遍历并终止所有请求，确保上个页面的请求被清理，保持应用的高效运行。此外，还提及了已被废弃的CancelToken方法作为对比。

取消请求/Cancellation

需求：页面切换时清除上个页面所有未完成的请求

AbortController-`推荐`

v0.22.0开始支持，用于取消请求

1.为每个请求设置signal字段值，且把controller存储到vuex中

import axios from "axios"
import store from "../store"
const instance = axios.create({
  ...
})
instance.interceptors.request.use(
  req => {
    const controller = new AbortController() // 每个请求时都新生成一个AbortController实例
    req.signal = controller.signal // 设置请求的signal字段为new AbortController()的signal
    store.commit("addRequest", controller)
    ...
    return req
  },
  error => error
)

2.store中代码，存储每个controller，用于调用每个controller的abort方法来取消请求

import { createStore } from "vuex"
export default createStore({
  state() {
    return {
     requests: []
    }
  },
  mutations: {
    addRequest(state,controller) {
      state.requests.push(controller)
    }
  }
})

3.路由拦截器beforeEach里做处理，每次页面切换时就清除上个页面的所有请求

router.beforeEach((to, from, next) => {
  ...
  store.state.requests.forEach(controller => controller.abort()) // 通过遍历终止所有未完成的请求
  store.state.requests = [] // 执行完清空，从而不影响新页面的请求列表
  next()
})

CancelToken -`废弃(deprecated)`

v0.22.0开始废弃，虽然你还可以正常使用，但是不应该在新项目中使用

1.为每个请求设置cancelToken字段值，且把source存储到vuex中

import axios from "axios"
import store from "../store"
const instance = axios.create({
  ...
})
const CancelToken = axios.CancelToken // 生成终止请求的CancelToken对象
instance.interceptors.request.use(
  req => {
    const source = CancelToken.source() // 每个请求时都新生成一个source对象
    req.cancelToken = source.token // 设置cancelToken字段为source的token，用于source.cancel()清除
    store.commit("addRequest", source)
    ...
    return req
  },
  error => error
)

2.store中代码，存储每个source，用于调用每个source的cancel方法来取消请求

import { createStore } from "vuex"
export default createStore({
  state() {
    return {
     requests: []
    }
  },
  mutations: {
    addRequest(state,source) {
      state.requests.push(source)
    }
  }
})

3.路由拦截器beforeEach里做处理，每次页面切换时就清除上个页面的所有请求

router.beforeEach((to, from, next) => {
  ...
  store.state.requests.forEach(source => source.cancel()) // 通过遍历终止所有未完成的请求
  store.state.requests = [] // 执行完清空，从而不影响新页面的请求列表
  next()
})