美文网首页
vue - axios取消接口请求

vue - axios取消接口请求

作者: w_wx_x | 来源:发表于2020-07-15 14:45 被阅读0次

    axios

    /*
      方式一:工厂方式创建
             CancelToken.source
    */
    var CancelToken = axios.CancelToken;
    var source = CancelToken.source();
    
    axios.get('/user/12345', {
      cancelToken: source.token
    }).catch(function(thrown) {
      if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
      } else {
        // 处理错误
      }
    });
    // 取消请求(message 参数是可选的)
    source.cancel('Operation canceled by the user.');
    
    
    /*
      方式二:executor 函数
    */ 
    var CancelToken = axios.CancelToken;
    var cancel;
    axios.get('/user/12345', {
      cancelToken: new CancelToken(function executor(c) {
        // executor 函数接收一个 cancel 函数作为参数
        cancel = c;
      })
    });
    // 取消请求
    cancel();
    

    原生:abort()

    <div>
        <button  id="get">请求</button>
        <button  id="cancel">取消</button>
    </div>
    <script>
        var currentAjax = null
        $('#get').click(function () {
            currentAjax = $.ajax({
                type: 'GET',
                url: 'http://...',
                success: function (res) {
                    console.log(res)
                },
                error: function (err) {
                    console.log("获取失败")
                }
            })
        })
        $('#cancel').click(function () {
            if (currentAjax) {
                currentAjax.abort()
            }
        })
    </script>
    
    

    相关文章

      网友评论

          本文标题:vue - axios取消接口请求

          本文链接:https://www.haomeiwen.com/subject/yjgdhktx.html