0


axios 取消请求:CancelToken

注意:此方法(CancelToken),官方已经不推荐,推荐去看官网的方法

示例代码:

<body>
  <button id="btn1">点我获取测试数据</button>
  <button id="btn2">取消请求</button>
  <script>
    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');

    const {CancelToken} = axios; //CancelToken能为一次请求‘打标识’

    let cancel;

    btn1.onclick = async () => {
      axios({
        url:'http://localhost:5000/test1?delay=3000',
        cancelToken: new CancelToken((c)=>{ //c是一个函数,调用c就可以关闭本次请求
          cancel = c;
        })
      }).then(
        response =>{console.log('成功了',response);},
        error =>{console.log('失败了',error);}
      )
    }

    btn2.onclick = () =>{
      cancel();
    }
  </script>
</body>

步骤操作:

1.首先定义一个 CancelToken 来接收 axios 中 CancelToken 主要是为了’打标识

const {CancelToken} = axios; //CancelToken能为一次请求‘打标识’

2.然后定义一个 cancel 变量

let cancel;

3.在 axios 对象中配置 cancelToken:

cancelToken: new CancelToken((c)=>{ //c是一个函数,调用c就可以关闭本次请求 cancel 的缩写
  cancel = c;//赋值给外面的变量cancel 提升c的作用域?
})

4.最后绑定在某个事件发生后想取消请求时调用:

//笔记中所写的事件为点击事件 任何事件都可以
btn2.onclick = () =>{
  cancel();
}

优化取消请求(细化错误问题):

说明:点击取消请求时,axios也会去失败的回调,但这不是服务器的错误导致的,是用户自身不需要本次请求,所以需要对于错误进行划分。以及如果用户反复点击,会发出多次请求,单只需要一次请求。

示例代码:

<body>
  <button id="btn1">点我获取测试数据</button>
  <button id="btn2">取消请求</button>
  <script>
    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');

    const { CancelToken, isCancel } = axios //CancelToken能为一次请求‘打标识’

    let cancel;

    btn1.onclick = async () => {
      if(cancel) cancel();//避免多次反复请求
      axios({
        url: 'http://localhost:5000/test1?delay=3000',
        cancelToken: new CancelToken((c) => { //c是一个函数,调用c就可以关闭本次请求
          cancel = c;
        })
      }).then(
        response => { console.log('成功了', response); },
        error => {
          if (isCancel(error)) {
            //如果进入判断,证明:是用户取消了请求
            console.log('用户取消了请求,原因是', error.message);
          } else {
            console.log('失败了', error);
          }
        }
      )
    }

    btn2.onclick = () => {
      cancel("任性,我就是不想要了");
    }
  </script>
</body>

解释:cancel 函数可在括号中添加说明,在进入失败的回调时进行判断是服务器端发出的,还是用户自己取消的。

axios 请求拦截器中使用取消请求:

示例代码:

<body>
  <button id="btn1">点我获取测试数据</button>
  <button id="btn2">取消请求</button>
  <script>
    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');

    const { CancelToken, isCancel } = axios //CancelToken能为一次请求‘打标识’

    let cancel;
        
    //请求拦截器
    axios.interceptors.request.use(config => {
      if(cancel) cancel('取消了');
      config.cancelToken =new CancelToken((c)=> cancel = c); 
            //c是一个函数,调用c就可以关闭本次请求
      return config;
    });

    //响应拦截器
    axios.interceptors.response.use(response => {
      return response.data;
    },error => {
      if (isCancel(error)) {
        //如果进入判断,证明:是用户取消了请求
        console.log('用户取消了请求,原因是', error.message);
      } else {
        console.log('失败了', error);
      }
      return new Promise(()=>{});
    });

    //进行简化
    btn1.onclick = async () => {
      const result = await axios.get('http://localhost:5000/test1?delay=3000');
      console.log(result);
    }

    btn2.onclick = () => {
      cancel("我不想要了");
    }
  </script>
</body>

axios 批量发送请求:

使用了axios.all( ) 的API,括号中为数组,其中写需要并发的请求。

<body>
  <button id="btn1">点我获取测试数据</button>

  <script>
    const btn1 = document.getElementById('btn1');

    btn1.onclick = async () => {
      axios.all([
        axios.get('http://localhost:5000/test1'),
        axios.get('http://localhost:5000/test2'),
        axios.get('http://localhost:5000/test3'),
      ]).then(
        response =>{console.log(response);},
        error =>{console.log(error);}
      )
    };
  </script>
</body>

解释:Axios.all( ) 基于 promise.all( ),所有的都是成功的回调才会返回数据,如果有一个失败的回调,就会走错误信息。此方法会按顺序打印 并发的三个请求的数据,并且如果用了延迟请求也会是原本的顺序,这是 axios 封装好的。

标签: 前端 javascript axios

本文转载自: https://blog.csdn.net/zqlbanzhuan/article/details/128135101
版权归原作者 Allen·s 所有, 如有侵权,请联系我们删除。

“axios 取消请求:CancelToken”的评论:

还没有评论