【cancel请求】切换页面,对上一个页面正在pending的ajax进行取消操作

  • Post author:
  • Post category:其他




切换页面时,取消上一个页面正在请求的一些操作




前言

在项目中,我们会遇到个问题,就是页面切换时,上个页面的请求还在继续,并没有停止,如果这时候有什么提示性语句的话,就会出现在下一个页面,这样就会显得很不和谐。而且我们切换页面之后,上一个页面的请求对我们当前页面来说并没有任何作用,所以就需要我们在切换页面时,中断上一个页面的请求。这也是优化性能的一个方法。



一、CancelToken

我们使用的主要方法就是axios的cancelToken。感兴趣可以去官网看看

官网:

http://www.axios-js.com/zh-cn/docs/#%E5%8F%96%E6%B6%88

主要是两种方式:

一种是:source静态方法,调用之后返回一个对象,该对象包含一个token属性,用于标记请求和一个cancel方法,用于取消请求。

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
     // 处理错误
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

另一种是:通过传递一个executor函数到CancelToken的构造函数来创建cancelToken

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// cancel the request
cancel();



二、使用

在这里我这边主要使用的是第二种,:通过传递一个executor函数到CancelToken的构造函数来创建cancelToken。主要思路就是

1、给请求打一个唯一标识,存入cancelList。

2、当前端拿到后端的回复的时候,就把该请求从cancelList中删除。

3、切换页面时,将cancelList列表里面的请求全部取消,并删除。

从上面三个步骤看来其实还是蛮简单的。

let’s do it!



1、给请求打一个唯一标识,存入cancelList。

这一步应该在axios请求拦截处做处理,我这里用的标识是时间戳,因为我这边的所有请求的路径都是一样的,不能用来作为唯一标识。所以只能用时间戳,其余的小伙伴可以使用请求路径来做唯一标识哟,请求路径还可以用来判断是不是重复请求。

做了唯一标识之后存入到cancelList,我这边使用了store封装了一下。

代码如下(示例):

service.interceptors.request.use(
    config => {
        // 记录当前请求的cancelToken,存在store里面
        config.cancelToken = new axios.CancelToken(function (cancel) {
            let item = {
                index: config.time, //唯一标识
                cancel: cancel,
            }
            appStore.cancelReq.editCancelList(item) // // 存入cancelList
        })
        
        return config
    },
    error => {
        Promise.reject(error)
    }
)



2、当前端拿到后端的回复的时候,就把该请求从cancelList中删除。

当后端回复了请求之后,代表这个请求已经结束,不需要取消了。所以不应该再存在cancelList表中。

代码如下(示例):


// response 响应拦截器
service.interceptors.response.use(
    response => {
        //取出store里面记录的cancelList
        let pendingRequest = appStore.cancelReq.cancelList
        let requestMark = response.config.time //标记在ajax里面的time
        const markIndex = pendingRequest.findIndex((item) => {
            return item.index === requestMark
        })

        // 有response证明请求结束,就删除该标识。
        if (markIndex > -1) {
            // 删掉在pendingRequest中的请求标识
            appStore.cancelReq.deleteCancelList(markIndex)
        }

        return response
    }, error => {
        if (axios.isCancel(error)) {
            return new Promise(() => {})
        }

        return Promise.reject(error)
    }
)



3、切换页面时,将cancelList列表里面的请求全部取消,并删除。

切换页面时,将cancelList里面的请求都cancel掉,并从cancelList表里面删除掉

这一步需要在route里面操作主要就是routerBeforeEach

代码如下(示例):

router.beforeEach((to, from, next) => {
	appStore.cancelReq.clearCancelList()
	next()
})



4、附store.js的代码

代码如下(示例):

import { ref } from "vue"
import { defineStore } from "pinia"
// 使用setup模式定义
export const cancelReq = defineStore("cancelHttp", () => {
    //定义表 记录当前正在执行的请求
    const cancelList = ref([])

    //向表中 添加正在执行的请求
    function editCancelList(val) {
        cancelList.value.push(val)
    }

    //向表中删除已执行完的请求
    function deleteCancelList(markIndex) {
        cancelList.value.splice(markIndex, 1)
    }

    //对表中所有请求进行取消操作,并将表置空
    function clearCancelList() {
        cancelList.value.forEach(item => {
            item.cancel()
        })
        cancelList.value = []
    }

    return { cancelList, editCancelList, deleteCancelList, clearCancelList }
})




三、注意事项

取消的请求会走error ,需要在error做一下处理,不然可能会出现其他报错啥的,主要使用的方法是 isCancel()

代码如下(示例):

service.interceptors.response.use(
    response => {
     	·····
        return response
    }, error => {
        if (axios.isCancel(error)) {
            return new Promise(() => {})
        }

        return Promise.reject(error)
    }
)

都看这里了,还不点个收藏哇~~~~



版权声明:本文为xh1506101064原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。