axios中断请求

最新推荐文章于 2023-03-09 21:20:08 发布

天高任鸟飞dyz

最新推荐文章于 2023-03-09 21:20:08 发布

阅读量1k

点赞数 1

分类专栏： axios Vue web前端文章标签：前端

本文链接：https://blog.csdn.net/yzding1225/article/details/125522377

版权

web前端同时被 3 个专栏收录

55 篇文章 4 订阅

订阅专栏

Vue

24 篇文章 1 订阅

订阅专栏

axios

1 篇文章 0 订阅

订阅专栏

方案一、

    <button onclick="test()">click me</button>
    <script src="https://unpkg.com/axios@0.18.0/dist/axios.js"></script>

    <script>
      const l = console.log;

      async function test() {
        const CancelToken = axios.CancelToken;
        const source = CancelToken.source();

        axios("http://localhost:5000/test", {
          cancelToken: source.token,
        })
          .then(r => {
            l(r.data);
          })
          .catch(err => {
            if (axios.isCancel(err)) {
              l(err.message);
            } else {
              console.error(err);
              // handle error
            }
          });

        source.cancel("abort。"); // 调用方法中断请求
      }
    </script>

方案二、

        const CancelToken = axios.CancelToken;
        let cancel;

        axios("http://localhost:5000/test", {
          cancelToken: new CancelToken(function executor(c) {
            l(`请求结束前`);
            cancel = c;
          }),
        })
          .then(r => {
            l(r.data);
          })
          .catch(err => {
            if (axios.isCancel(err)) {
              l(err.message);
            } else {
              console.error(err);
              // handle error
            }
          });

        cancel(`message`); // 调用方法中断请求