如何取消 HTTP 请求

前言：如何取消 HTTP 请求？这也算一个经典的面试题了，平时工作中大家应该很少用到。但是某些时候还是挺有用的。

比如，在按钮不防抖的情况下，快速连续点击一个按钮，会造成重复发送请求，不用防抖技术如何停止请求。再比如一个请求等待时间过长，用户不想等待了，直接点击取消按钮，取消发送这个请求。

我们知道，浏览器能发送请求，靠两个重要的 API，一个是比较老旧的 XHR，另一个比较新的 Fetch。发送请求的取消针对的也就是这两个。

先来用 NodeJS 来搭个后端，搞一个接口，源代码如下：

const bodyParser = require("body-parser");
const express = require("express");
const path = require("path");
const app = express();
function resolvePath(dir) {
    return path.join(__dirname, dir);
}
app.use(express.static(resolvePath("/public")));
// https://expressjs.com/en/4x/api.html#req.body
app.use(bodyParser.json({ limit: "50mb" }));
app.use(bodyParser.urlencoded({ extended: true }));


app.get("/upload", function (req, res) {
    res.json({
        code: 0,
        message: "GET 发送成功"
    });
});

const port = 8888;
app.listen(port, function () {
    console.log(`listen port ${port}`);
});

后端代码，直接使用 node 命令启动就行了，启动的时候，我们静态化了一个文件夹 —— public，这文件夹下有个文件 index.html，这样我们服务一旦启动完成，只需要访问 http://localhost:8888/ 就能在线调试了，接下来的代码演示，都会在 index.html 中进行，而且只展示 <script></script> 标签部分。

一、XHR 中断请求

XHR 请求的中断是通过 xhr.abort(); 来完成的。

const xhr = new XMLHttpRequest(),
    method = "GET",
    url = "/upload";
xhr.open(method, url, true);

xhr.send({ age: 90 });
xhr.onreadystatechange = (state) => {

    if (xhr.readyState === 4 && (xhr.status === 200)) {
        // do something
        console.log(xhr.responseText);
    }
}

xhr.abort();

前端代码执行之后，network 面板的显示 upload 接口如下：

二、Fetch 中断请求

先看前端代码：

const controller = new AbortController();
const signal = controller.signal;
console.log(signal, "signal的初始状态");
signal.addEventListener("abort", function (e) {
    console.log(signal, "signal的中断状态");
});


fetch("/upload", {signal})
.then((res) => {
    console.log(res, "请求成功");
}).catch(function (thrown) {
    console.log(thrown);
});
// 增加部分结束
controller.abort({
    name: "CondorHero",
    age: 19
});

再看网络请求：

fetch 通过 controller.abort 中断请求传入的形参不能被很好的接收。看控制台我们就能看出来了，完全给忽略了，这点没有 Axios 好：

AbortController 还有一个更加头疼的问题，就是完全不兼容 IE。

三、Axios 请求中断

Axios 中断请求有两种办法，详情见 cancellation，我们直接实战：

第一种：

const CancelToken = axios.CancelToken;
let cancel;
const instance = axios.create();
// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
}, function (error) {
    // Do something with request error
    console.log(`request error`, error);
    return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
}, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
});
instance.get("/upload", {
    cancelToken: new CancelToken(function executor(c) {
        // An executor function receives a cancel function as a parameter
        cancel = c;
    })
}).then(res => {
    console.log(res);
}).catch(function (thrown) {
    if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
    } else {
        // handle error
    }
});
cancel({
    name: "CondorHero",
    age: 19
});

请求直接未发出，最棒的是还能自定义错误：

第二种：

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

const instance = axios.create();
// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
}, function (error) {
    // Do something with request error
    console.log(`request error`, error);
    return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
}, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
});
instance.get("/upload", {
    cancelToken: source.token
}).then(res => {
    console.log(res);
}).catch(function (thrown) {
    if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
    } else {
        // handle error
    }
});
source.cancel({
    name: "CondorHero",
    age: 19
});

浏览器运行结果同第一种。

四、手把手封装 axios 取消重复请求

有中断请求这个技术，当然要用到项目里面去，本来我还想自己写这个教程的，结果看到一篇非常棒的博客，非常 Nice：手把手封装 axios 取消重复请求 成功滑水掉😂。

记住核心思想就一条，维护一个数组，请求 push，响应 filter，重复请求 cancel 掉。

五、最后

最近没活，但是挺闹心，本来二月份约的办港卡，但是因为 Velo 没开户成功，导致富途没入金成功，然后约不了二月份的。只能等下个月的了，但是因为我从一月十八就开始开户了，到现在都没成功，有点着急，还好，中午第二次打电话给客服，告诉我再提交申请下就行了。果然，我填完资料提交瞬间开户成功，这次的男客服比上次的女客服靠谱多了，大赞（好奇都 21 年了，还有男客服，不管了，反正这个客服很棒，一百分💯好评）。

而且我发现汇率是个神奇的东西，前段时间的港币兑成人命币发现我少了将近三百现大洋😢。这还不算这次往 Velo 里面充钱找的中介，又干掉六百五，算了算了，不算了。事能办成就行了。

拜拜～

当前时间 Wednesday, February 3, 2021 18:24:40