Vue中路由怎么切換終止異步請求

本篇內容主要講解“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('superagent')
var xhr = request('post','/api/xxxx/xxxx')
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('Operation canceled by the user.');

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()
})

這種只是假設，自然請求完成之后最好，還是手動釋放樹的請求示例。例如ajax請求完成之后在complite里面splice store里面的實例。

到此，相信大家對“Vue中路由怎么切換終止異步請求”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！