解决AbortController中断请求无法再次请求

axios新方式中断请求

文档:GitHub - axios/axios: Promise based HTTP client for the browser and node.js

 官网的示例

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// cancel the request
controller.abort()

 如果按照这种方法后,再次点请求就无法发送了,因为signal里面的属性aborted是只读属性,改不了,你点击发送请求,他会读取signal的aborted值为true,就不发送了,咋办?看下去

我看了一下api,文档:AbortSignal - Web API 接口参考 | MDN,AbortController - Web API 接口参考 | MDN

这家伙是个只读属性,咋办?方法总是有的,把控制器定在外面为空,用的时候再设置

let controller = null//在外面定一个控制器,设置为空   
    document.getElementById('one').onclick = async () => {
      try {
        // 如果控制器存在,说明有上个请求,就它取消并设置为空
        if (controller) {
          controller.abort()
          controller = null
        }
        //没有的话就到这一步
        controller = new AbortController()
        let res = await request({
          url: "/posts",
          signal: controller.signal
        })
        console.log(res);

      } catch (error) {
        console.log(error);
      }

    }
    document.getElementById('two').onclick = () => {

      if (controller) {
        controller.abort()
        controller = null
      } else {
        console.log('请求为空,无法请求');

      }
    }