axios取消请求

[YutHelloWorld]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios取消请求</title>
  </head>
  <body>
    <div>
      <button class="btn">发送请求</button>
      <button class="btn">取消请求</button>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 获取按钮
    const buttons = document.querySelectorAll("button");
    // 2.声明 cancelToken
    let cancelToken = null;
    // 发送请求
    buttons[0].onclick = function () {
      axios({
        url: " http://localhost:3000/posts/1",
        method: "get",
        // 1.添加配置对象的属性
        cancelToken: new axios.CancelToken(function (c) {
          // 3.将 c 的值赋给 cancelToken
          cancelToken = c;
        }),
      })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (err) {
          console.log("===>", err);
        });
    };
    // 绑定第二个按钮事件取消请求
    buttons[1].onclick = function name(params) {
      if (typeof cancelToken === "function") {
        cancelToken();
      }
    };
  </script>
</html>

json-server --watch  db.json -d 2000

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

[YutHelloWorld]

取消请求后，计入catch错误捕获。