手写axios源码系列五：CancelToken取消请求类封装

可达鸭头上站青蛙

已于 2023-04-25 14:13:15 修改

阅读量1k

点赞数 1

分类专栏：手写JavaScript源码系列 Http 文章标签： javascript axios cancelToken signal AbortController

于 2023-04-24 08:52:38 首次发布

本文链接：https://blog.csdn.net/ThisEqualThis/article/details/130323866

版权

手写JavaScript源码系列同时被 2 个专栏收录

15 篇文章 3 订阅

订阅专栏

Http

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

文章目录

一、使用 CancelToken 取消请求
- 1、创建 CancelToken.js 文件
- 2、发送请求时订阅 onCanceled 方法
二、使用 AbortController 取消请求
三、使用 json-server 测试"取消请求"功能代码

在第一篇章节手写axios源码系列一：axios核心知识点中，我们知道取消请求有两种配置方式：

config.cancelToken
config.signal

两种方式都可以取消请求，接下来我们探究一下两种取消请求的方式有何不同。

一、使用 CancelToken 取消请求

config.cancelToken 取消请求的方式是封装 CancelToken 类，使用发布/订阅模式对发送的请求进行了订阅 onCanceled 方法，然后在需要时执行 onCanceled 方法取消请求。

1、创建 CancelToken.js 文件

export default class CancelToken {
	constructor(executor){
		let resolvePromise;
		// 给实例对象添加 promise属性
		this.promise = new Promise(function promiseExecutor(resolve){
			// 暴露 resolve方法，可以在外部执行 resolvePromise方法改变当前 pending状态的 promise为 fulfilled
			resolvePromise = resolve;
		})
		// 调用执行器函数，传入一个函数
		executor(function c(){
			resolvePromise()
		})
		// 当 this.promise状态变更时执行取消请求订阅事件
		this.promise.then(() => {
			const i = this._listeners.length;
			// 循环数组倒序执行
			while(i-- > 0){
				this._listeners[i]();  // 执行取消请求 onCanceled方法
			}
			// 置空 _listeners
			this._listeners = null;
		})
	}
	// 订阅事件方法 subscribe
	subscribe(listener){
		if (this._listeners){
			// 向 _listeners中添加监听函数
			this._listeners.push(listenner)
		} else {
			// 创建 this._listeners容器
			this._listeners = [listener]
		}
	}
	// 静态方法 source，其实是一个工厂函数
	static source(){
		let cancel;
		// token为 CancelToken的实例对象，带有 subscribe订阅方法
		const token = new CancelToken(function executor(c){
			cancel = c;
		});
		return { token, cancel }
	}
}

2、发送请求时订阅 onCanceled 方法

什么时候订阅取消请求 onCanceled 方法呢？
发送请求应该与取消请求是相耦合的，所以应该在发送请求的时候订阅取消当前请求的方法 onCanceled 。

发送请求的代码写在 xhr.js下：

export default function xhrAdapter(config) {
	// 返回一个 promise对象
	return new Promise((resolve, reject) => {
		// 其他代码
		// ...
		// 发送请求
		request.send(config.data || null);
		// 订阅取消请求，根据 config中是否配置了 cancelToken字段来判断是否需要取消请求
		if (config.cancelToken) {
			const onCanceled = () => {
				request.abort();  // 中止请求
			}
			// 订阅取消请求 onCanceled方法
			config.cancelToken.subscribe(onCanceled);
		}
	})
}

二、使用 AbortController 取消请求

使用 AbortController 的方式取消请求代码很简单，根据 config 对象中是否配有 signal 字段来判断，如果有则取消请求，没有则不做任何操作。

修改 xhr.js 文件代码：

export default function xhrAdapter(config) {
	// 返回一个 promise对象
	return new Promise((resolve, reject) => {
		// 其他代码
		...
		// 发送请求
		request.send(config.data || null);
		// 订阅取消请求，根据 config中是否配置了 cancelToken字段或者 signal字段来判断是否需要取消请求
		if (config.cancelToken || config.signal) {
			const onCanceled = () => {
				request.abort();  // 中止请求
			}
			// 订阅取消请求 onCanceled方法
			config.cancelToken && config.cancelToken.subscribe(onCanceled);
			// signal字段判断
			if (config.signal){
				/**
				 * const controller = new AbortController()
				 * signal是 controller.signal对象，带有三个属性
				 * signal:{ 
				 * 		aborted: false,  	通信请求是否被终止(true)或未终止(false)，只读属性。
				 * 		onabort: null,   	监听事件。
				 * 		reason: undefined	取消请求原因。
				 * } 
				 */
				// aborted 字段为 true时直接取消请求，否则添加 abort监听取消事件
				config.signal.aborted ? onCanceled() : config.signal.addEventListener("abort", onCanceled);
			}
		}
	})
}

三、使用 json-server 测试"取消请求"功能代码

json-server 是一个可以在前端本地运行，存储 json 数据格式的快速启用的服务器。可以说它就是一个 mock 数据服务，可以模仿RESTful API。

1、全局安装 json-server

npm i -g json-server

2、创建 db.json 文件并监听文件

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    },
    {
      "id": 2,
      "title": "json-server2",
      "author": "typicode2"
    }
  ]
}

监听指令：json-server --watch db.json。

因为我们这里要测试取消请求，所以给请求添加个延迟时间，容易操作。

执行指令：json-server --watch -d 2000 db.json，请求会在延迟2s后返回响应数据。

3、创建 index.html 测试代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios源码解析</title>
</head>
<body>
  <button id="request">请求接口</button>
  <button id="cancel">取消请求</button>

  <script type="module">
    import axios from "./axios.js";
    const requestBtn = document.querySelector("#request");
    const cancelBtn = document.querySelector("#cancel");
    let source = null;
    // let controller = null

    requestBtn.addEventListener("click", function () {
      // controller = new AbortController();
      source = axios.CancelToken.source();
      // 发送请求
      axios({
        method: "get",
        url: "http://localhost:3000/posts",
        // signal: controller.signal,
        cancelToken: source.token
      }).then(response => {
        console.log(response);
      })
    });
    // 取消请求
    cancelBtn.addEventListener("click", function () {
   	  // controller.abort();
      source.cancel();
    });
  </script>
</body>
</html>