使用js閉包實現可取消的axios請求

从前有匹马叫代码發表於2024-09-09
JSiOS

在平常開發中，經常會遇到重複請求的情況，也許是因為網路問題，也許是因為介面問題等等，傳統做法是客戶端採用防抖來限制使用者傳送介面的頻率，一般出個loading轉圈圈的形式，

但是很少使用取消請求的做法，現在我來記錄一下，如何採用閉包來封裝一個可取消請求的函式，首先需要了解的是

1. 閉包

2. AbortController()

這裡對上述不做贅述，直接上程式碼：

需要注意的是，AbortController建構函式返回的例項，所包含的abort函式是一次性的，也就是說一個abort例項只能對應一個xhr請求，只能使用一次abort.abort()

理解了這一點，那麼我們就可以很容易的藉助閉包來實現這樣一個裝飾器函式：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <button id="send">send request</button>

    <script>
      document.getElementById("send").addEventListener("click", () => {
        getListAbortable()
          .then((res) => {
            console.log("資料:", res);
          })
          .catch((e) => {
            console.log("請求錯誤:", e);
          });
      });

      function AbortRequest(callback) {
        let abortable = null;
        return function () {
          if (abortable) {
            abortable.abort();
          }
          abortable = new AbortController();
          return callback(abortable.signal);
        };
      }

      const getListAbortable = AbortRequest((signal) => {
        return axios.get("/slow", { signal });
      });
    </script>
  </body>
</html>

當我快速點選按鈕的時候，會自動取消上一次xhr請求，併傳送下一次xhr請求，直到請求完成。

這樣就實現啦！

相關文章