前言
最近看了axios源码,里面的cancelToken有意思,以免忘记,写一篇博客记录一下。
用法
1.使用 CancelToken.source 工厂方法创建 cancel token
1 | // CancelToken是一个构造函数,用于创建一个cancelToken实例对象 |
2.通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token
1 | const CancelToken = axios.CancelToken; |
源码
1 | // axios/lib/cancel/CancelToken.js |
CancelToken
CancelToken是一个构造函数,通过new CancelToken()得到的是一个实例对象,它只有一个属性promise, 它的值是一个能触发取消请求的Promise对象。
1 | token = new CancelToken(executor function) ===> { promise: Promise对象 } |
执行CancelToken函数做了两件事:
创建一个Promise对象,且将这个对象赋值给promise属性,其resolve参数被暴露出来以备外部引用。 执行executor函数,将内部定义的cancel函数作为参数传递给executor
1 | var token = this; |
当执行
1 | let cancel |
token值为{promise: Promise对象} cancel就是CanelToken内部的那个cancel函数。
CancelToken.source
CancelToken.source是一个函数,通过源码可以看到,执行const source = CancelToken.source(),得到的是一个对象:1
2
3
4return {
token: token,
cancel: cancel
};
包含一个token对象,即CancelToken实例对象,和一个cancel函数。因此CancelToken.source()函数的作用是生成token对象和取得cancel函数。token对象是用于配置给axios请求中的cancelToken属性,cancel函数是将来触发取消请求的函数。
如何执行取消请求
1 | // axios/lib/adapters/xhr.js |
这是最终执行ajax请求的地方。
我们前面配置了cancelToken = new CancelToken(executor),得到对象{promise: 取消请求的Promise对象},因此上面cancelToken.promise就是这个promise。
当我们执行了内部暴露出的cancel方法,promise被reslove转为fullfilled状态,进入then回调中,
调用xhr的abort()取消请求。