umi-request如何取消请求

有的时候，我们提交表单表单数据到服务器请求后，可能需要取消请求，这个时候就涉及到umi-request的取消请求。现在就记录一下，通过AbortController如何中止请求。

首先需要在项目中安装一个包：yet-another-abortcontroller-polyfill

npm install --save yet-another-abortcontroller-polyfill

安装完成后，在代码中引入

import 'yet-another-abortcontroller-polyfill'

假如你是用umi-request做网络请求，使用方式如下：

import request from 'umi-request'

const controller = new AbortController()
const { signal } = controller

request('/api/path', {
    signal // 这个标记将信号和控制器关联，允许在fetch请求中中止请求
})

// 当你需要取消请求的时候,执行：
controller.abort()

在实际的使用过程中，需要注意controller的实例控制，当同一个controller中止请求之后，之后无法再次发起请求，如果需要再次请求，再次中止，需要将原来的controller清除，然后创建一个新的实例。

这个controller是个什么东西？在mdn中查看一下：

AbortController接口表示一个控制器对象，允许你根据需要中止一个或多个 Web请求。
你可以使用 AbortController.AbortController() 构造函数创建一个新的 AbortController 。
使用AbortSignal 对象可以完成与与DOM请求的通信。

该构造函数有一个属性：

AbortController.signal (en-US) 只读
返回一个AbortSignal对象实例，它可以用来 with/abort 一个Web(网络)请求。

和一个方法：

AbortController.abort()
中止一个尚未完成的Web(网络)请求。这能够中止fetch 请求，任何响应Body的消费者和流。

因此，该方法是先使用AbortController()构造函数创建一个控制器，然后使用AbortController.signal属性获取期关联的实际请求的对象的引用，也就是通过这个跟fetch请求进行关联。最后允许我们通过AbortController.abort()中止请求。