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

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

---

前言

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

一、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
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

另一种是：通过传递一个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();
1
2
3
4
5
6
7
8
9
10
11
12

二、使用

在这里我这边主要使用的是第二种，：通过传递一个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)
    }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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)
    }
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

切换页面时，将cancelList里面的请求都cancel掉，并从cancelList表里面删除掉
这一步需要在route里面操作主要就是routerBeforeEach

代码如下（示例）：

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

1
2
3
4
5

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 }
})


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

三、注意事项

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

代码如下（示例）：

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

        return Promise.reject(error)
    }
)

1
2
3
4
5
6
7
8
9
10
11
12
13

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