master

分支 (1)

管理

管理

master

Introduction-to-Axios-and-source-code-analysis
/
5.axios取消请求.html

<!--
 * @Author: ChaiHongJun
 * @Date: 2021-07-24 20:23:49
 * @LastEditors: ChaiHongJun
 * @LastEditTime: 2021-07-25 11:25:10
 * @version:
 * @Description:
-->
<!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>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2 class="page-header">axios 取消请求</h2>
      <button class="btn btn-primary" type="button">GET</button>
      <button class="btn btn-warning" type="button">cancel</button>
      <div class="card-body">
        <pre>
          // 1. 调用构造函数
          const CancelToken = axios.CancelToken;
          // 2. 设置可取消请求标记
           let cancel = null;
          // 3. 请求前，先判断之前的请求是否存,
          // 如果存在则取消前面的请求，使用后面新的请求
           if(cancel){
             cancel();
           }
          axios({
                url:'/api',
                // 3.配置可取消的属性和对应的函数
                /*  这里给每个请求设置一个可取消的标记（函数形式），提供外部调用 */
              cancelToken:new CancelToken(function(c){
                // 4. 参数c为实际可取消函数，这里赋值给全局变量cancel，提供外部调用
                  cancel = c;
              })
            }).then((res) => {
                //获取数据
                console.log(res)
                cancel = null; //* 请求完毕获取数据后，初始化【可取消】标记
            })
              //5.点击执行取消请求
              document.querySelector('button').addEventListener('click', function(){
                    cancel();
              });
        </pre>
      </div>
    </div>
  </body>
</html>
<script>
  window.addEventListener("load", () => {
    const buttons = document.querySelectorAll("button");
    // 1. 调用构造函数
    const CancelToken = axios.CancelToken;
    // 2. 设置可取消请求标记
    let cancel = null;
    for (let i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener("click", () => {
        //点击请求按钮
        if (i == 0) {
          /* 防止连续多次点击 */
          // 对于多次点击，先判断之前的请求是否存在，如果存在就取消下一次请求
          if (cancel) {
            cancel();
          }
          axios({
            url: "http://localhost:3000/posts",
            // 3.配置可取消的属性和对应的函数
            cancelToken: new CancelToken(function (c) {
              cancel = c;
            }),
          }).then((response) => {
            console.log(response);
            // 获取完数据，将可取消标记初始化
            cancel = null;
          });
        } else {
          //点击了取消按钮
          cancel();
        }
      });
    }
  });
</script>