AbortController可以中止Fetch请求,在Axios的0.22.0版本后也可以使用该方法。

var controller=new AbortController()
var signal=controller.signal
function mydata(){
  fetch('/api',{signal:signal}).then()
} 

使用controller.abort()即可中止存在{signal:signal}信号的请求

存在的问题

当第二次使用该请求时会发现无法再次发送请求,这个问题的原因是controller.abort()中止请求后signal的aborted属性就为true(表示已中止了请求),导致了无法再次发送请求,所以解决办法就是把用过的AbortController实例清空重新创建新实例

  var controller=null
  var signal=null
  function mydata(){
    controller=new AbortController()
    signal=controller.signal
    fetch('/api',{signal:signal}).then()
  } 
  function abort(){
    if(controller){
      controller.abort()
      controller=null
    }
  } 

上面代码abort中止函数会判断是否有AbortController实例controller,如果有就中止它并且清空中止后的实例,在下次请求时会创建一个新实例,拿到的就是新的signal,就不会存在无法发送请求的情况

暂无评论

    歌单载入中...