vue2手动中断ajax请求

最新推荐文章于 2024-01-05 08:00:00 发布

十一（Eleven.）

最新推荐文章于 2024-01-05 08:00:00 发布

阅读量458

点赞数

文章标签： ajax javascript vue.js

本文链接：https://blog.csdn.net/qq_40170536/article/details/130406208

版权

在请求拦截器中配置

// 请求拦截器
axios.interceptors.request.use(
  config => {
    startLoading(); //请求时的加载动画
    // 添加断开请求的方法---------------------这里为重点-----------------------------
    config['cancelToken'] = new axios.CancelToken(function executor(cancel) {
      Vue.$httpRequestList.push(cancel) //存储cancle
    })
    //以上与中断请求有关
    //安全机制验证
    //config.headers["Content-Security-Policy"] = "default-src 'self'";
    //config.headers["X-Content-Type-Options"] = "nosniff";
    //config.headers["X-XSS-Protection"] = 1;
    //config.headers["Access-Control-Allow-Origin"] = "*"
    // 判断是否存在token，如果存在的话，则每个http header都加上token
    if (auth.loadHeadersFlag() === "basic") {
      config.headers["Content-Type"] = "application/x-www-form-urlencoded";
      config.headers["Authorization"] =
        "abcde " +
        app.util.base64Encode(
          app.config.globle.client_id + ":" + app.config.globle.client_secret
        );
    } else if (auth.loadAccessToken()) {
      config.headers["Content-Type"] = "application/json";
      config.headers.Authorization =
        auth.loadTokenType() + " " + auth.loadAccessToken();
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

在util.js中封装一个中断请求的方法

/**
   * 中断请求方法
   */
  clearHttpRequestingList() {
    // 判断是否有存储的cancle
    if (Vue.$httpRequestList.length > 0) {
      Vue.$httpRequestList.forEach(item => {
        // 给个标志，中断请求
        item('interrupt')
      })
      Vue.$httpRequestList = []
    }
  }