一文講解Vue中路由切換終止非同步請求（附代碼）-Vue.js-PHP中文網

一文講解Vue中路由切換終止非同步請求（附代碼）

奋力向前

發布： 2021-08-25 10:16:19

轉載

2616 人瀏覽過

之前的文章《深入解析js中實作佇列（程式碼分享）》中，給大家了解了js中實作佇列。以下這篇文章給大家了解Vue中路由切換終止非同步請求，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所助。

一文講解Vue中路由切換終止非同步請求（附代碼）

問題：

#在SPA模式開發當中，例如VUE，目前路由切換的時候如何終止正在發生的非同步請求。

結果：

假如請求逾時並且有設定逾時時間。有一堆的非同步請求在執行，當使用者切換到另一個頁面，這些請求還未終止，並且當伺服器回應之後，反饋的結果不是當前頁面所期待的。最終會誤導用戶造成一些不必要的結果。也給web造成效能問題。

解決方案：

把執行的請求存入佇列，當路由切換的時候終止佇列裡的異步請求。

先搞一棵樹來儲存請求佇列

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
let store = new Vuex.Store({
  state: {
    requests: [],
  },
});

new Vue({
  el: "#app",
  router: router,
  render: (h) => h(App),
  store,
});

登入後複製

#利用ajax要求和終止

var xhr = $.ajax({
  type: "POST",
  url: "xxxsx",
  data: "",
  success: function () {
    alert("ok");
  },
});
//xhr.abort()  终止请求
this.$store.state.requests.push(xhr);

登入後複製

利用superagent請求和終止

const request = require(&#39;superagent&#39;)
var xhr = request(&#39;post&#39;,&#39;/api/xxxx/xxxx&#39;)
xhr.send(data)
//xhr.query(data) //get 传参
xhr.end((err,res)=>{
    ...todo...
})
//xhr.abort() 终止请求
this.$store.state.requests.push(xhr)

登入後複製

#利用axios請求

import axios from "axios";
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios
  .get("/api/xxxxx/xxxxx", {
    cancelToken: source.token,
  })
  .catch(function (thrown) {
    if (axios.isCancel(thrown)) {
      console.log("Request canceled", thrown.message);
    } else {
      // 处理错误
    }
  });

// 取消请求（message 参数是可选的）
//source.cancel(&#39;Operation canceled by the user.&#39;);

this.$store.state.requests.push(source);

登入後複製

#利用vue-resource請求

import Vue from "vue";
import req from "vue-resource";
Vue.use(req);

this.$http
  .get("/someUrl", {
    before(request) {
      this.$store.state.requests.push(request);
      //request.abort(); 终止请求
    },
  })
  .then(
    (response) => {
      // success callback
    },
    (response) => {
      // error callback
    }
  );

登入後複製

利用fetch請求

##fetch似乎無法監控讀取進度和終端請求，他沒有timeout 機制，沒有progress 提示，但是可以利用Promise 來實現終止

var _fetch = (function (fetch) {
  return function (url, options) {
    var abort = null;
    var abort_promise = new Promise((resolve, reject) => {
      abort = () => {
        reject("abort.");
        console.info("abort done.");
      };
    });
    var promise = Promise.race([fetch(url, options), abort_promise]);
    promise.abort = abort;
    return promise;
  };
})(fetch);

var xhr = _fetch("/api/xxx/xxxx", { methods: "POST", body: data });
xhr.then(
  function (res) {
    console.log("response:", res);
  },
  function (e) {
    console.log("error:", e);
  }
);
xhr.abort(); //终止

this.$store.state.requests.push(xhr);

登入後複製

那麼知道如何終止請求，然後也儲存了請求實例，剩下的只要監聽路由就行了

let router = new Router({....})
//每次路由改变之前终止所有的请求实例
router.beforeEach(function (to, from, next) {
    this.$store.state.requests.forEach(xhr=>xhr.abort()) //终止所有的请求实例
    this.$store.state.requests =[] //执行完清空，等待下一次的页面的请求装载
    next()
})

登入後複製