取消Fetch API請求

yezi-dream發表於2019-02-24

     如今,Fetch API已經成為現在瀏覽器非同步網路請求的標準方法,但Fetch也是有弊端的,比如: Fetch還沒有方法終止一個請求,而且Fetch無法檢測上傳進度

     現在我們可以通過 AbortControllerAbortSignal 來終止,程式碼如下:     

          const controller = new AbortController()

          const signal = controller.signal

          fetch(`./data.json`, { signal })

      可以通過controller.abort()來通知終止事件,比如,你可以在請求發出後3秒來終止請求

      setTimeout(() => { controller.abort(); }, 3 * 1000);

 

      如果請求完成了,呼叫absort()不會發生錯誤

      如果請求沒有完成,那麼Fetch就會丟擲一個DOMException異常,異常的name屬性值為”AbortError”,可以在promise中的catch捕獲這個異常

     例如:  fetch(`./data.json`, { signal })

                  .then((res) => {})

                  .catch((err) => {

                     if (err.name === `AbortError`) {

                         console.log(`Fetch aborted`);

                    } else {

                        console.log(`Another error`);

                   }

                 })

 

相關文章