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

问题如下

 由于CancelToken在新版本中已被弃用，因此在今后的取消axios等请求中，我更推荐大家使用AbortController；

但是在AbortController在使用中，我们一旦取消过一次请求就没办法再发请求了代码如下：

  <script>
    const btn1 = document.getElementById('btn1')
    const btn2 = document.getElementById('btn2')

    const controller = new AbortController()
    // 获取所有人信息
    btn1.onclick = () => {
      axios({
        // GET请求，默认省略GET
        url:'http://localhost:5000/test1',
        // 设置延迟事件
        params:{delay:2000},
        signal:controller.signal
      }).then(
        response => console.log(response.data),
        error => console.log(error)
      )
    } 
    
    // 点击取消请求
    btn2.onclick = () => {
      controller.abort('请求取消')
    }
  </script>

---

为何出现这种情况

如下图：因为我们点击取消请求后，AbortController中的aborted属性由false --> true，并始终保持为true，因此我们后面的请求也再也发不了了

 且AbortController中的aborted属性为只读属性，我们没办法通过修改aborted来改变这种现状

---

解决方法如下

AbortController中的aborted属性为只读属性，那我们只能换一种思路，既然改变不了AbortController中的aborted属性，那我们可以改变AbortController，只要AbortController刷新了，那么aborted也会变会变为初始状态，代码如下

  <script>
    const btn1 = document.getElementById('btn1')
    const btn2 = document.getElementById('btn2')

    let controller = ''
    // 获取所有人信息
    btn1.onclick = () => {
      // 如果controller不为空，说明已经请求且创建过了，
      // 因此我们只需把他置空重新创建，就可以得到新的controller
      if(controller){
        controller = null
      }  
      controller = new AbortController()
      axios({
        url:'http://localhost:5000/test1',
        params:{delay:3000},
        signal:controller.signal
      }).then(
        response => console.log(response.data),
        error => console.log(error)
      )
    } 
    
    // 点击取消请求
    btn2.onclick = () => {
      controller.abort('请求取消')
    }
  </script>