如何封装一个可取消的 HTTP 请求？

前言

你可能会好奇什么样的场景会需要取消 HTTP 请求呢？

确实在实际的项目开发中，可能会很少有这样的需求，但是不代表没有，比如：

假如要实现上述这个公告栏，每点击一个 tab 按钮就会切换展示容器容器中的内容，但是由于这是三个 tab 按钮对应展示容器和信息条目结构样式都一致，于是为了 复用这个结构，将展示容器和其中的信息条目都作为三个 tab 按钮对应展示效果，只是点击每个 tab 按钮后 发送请求 后得到的数据不同.

正常情况下 tab1 对应的数据在初始化时进行展示，但是现在还存在一个问题，那就是如果点击完 tab2 并且已经发送了请求获取数据，假设这个请求需要 30s 后才响应回来，由于用户比较着急于是直接点了 tab3 ，此时 tab3 对应的接口已经发送出去但是未响应，而此时 tab2 对应的接口响应回来了，就会导致展示容器中的信息条目展现了错误的数据.

现在你应该知道，为什么需要一个可取消的 HTTP 请求了吧！！

准备工作

为了避免 端口、协议、IP 等不一致产生的跨域问题，这里就直接使用 express 启动一个本地服务，并返回测试页面 index.html，目录结构如下：

• 其中最外层的 serverv.js 就是本地服务的代码，内容很简单：

  const path = require('path')
  const express = require('express')
  const app = express()
  
  // 返回静态资源
  app.use(express.static(path.join(__dirname, 'src')))
  
  // 处理 api 请求接口
  app.get('/message', function (req, res) {
       
       
    setTimeout(()=>{
       
       
      res.send('Hello World')
    } , 1000);
  });
  
  
  app.listen(3000, (error) => {
       
       
    if (error) {
       
       
      console.error("server error：", error);
      return
    }
    console.log("server runing at port 3000 ...");
  })
  

• src/index.html 是测试页面，里面引入 src/request.js 中封装的请求方法
• src/request.js 简单的封装了一些请求方法，包含 XMLHttpRequest、fetch、axios 三种方式，内容如下：

  // xhrRequest
  function xhrRequest({
       
       
   method = 'get',
   url,
   params = null,
   async = true,
   success,
  }) {
       
       
   success = typeof success === 'function' ? success : () => {
       
       }
  
   const xhr = new XMLHttpRequest()
  
   xhr.open(method, url, async)
  
   xhr.onreadystatechange = () => {
       
       
     if (xhr.readyState == 4) {
       
       
       if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
       
       
         success(xhr.responseText)
       } else {
       
       
         console.log