Vue中路由怎么切換終止異步請(qǐng)求

本篇內(nèi)容主要講解“Vue中路由怎么切換終止異步請(qǐng)求”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Vue中路由怎么切換終止異步請(qǐng)求”吧!

問(wèn)題：

在SPA模式開(kāi)發(fā)當(dāng)中，比如VUE，當(dāng)前路由切換的時(shí)候如何終止正在發(fā)生的異步請(qǐng)求呢。

結(jié)果：

假如請(qǐng)求超時(shí)并且有設(shè)定超時(shí)時(shí)間。有一堆的異步請(qǐng)求在執(zhí)行，當(dāng)用戶切換到另一個(gè)頁(yè)面，這些請(qǐng)求還未終止，并且當(dāng)服務(wù)器響應(yīng)之后，反饋的結(jié)果不是當(dāng)前頁(yè)面所期待的。最終會(huì)誤導(dǎo)用戶造成一些不必要的結(jié)果。也給web造成性能問(wèn)題。

解決方案：

把執(zhí)行的請(qǐng)求存入隊(duì)列，當(dāng)路由切換的時(shí)候終止隊(duì)列里的異步請(qǐng)求。

首先搞一棵樹(shù)來(lái)存儲(chǔ)請(qǐng)求隊(duì)列

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請(qǐng)求和終止

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

利用superagent請(qǐng)求和終止

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() 終止請(qǐng)求
this.$store.state.requests.push(xhr)

利用axios請(qǐng)求

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 {
      // 處理錯(cuò)誤
    }
  });

// 取消請(qǐng)求（message 參數(shù)是可選的）
//source.cancel('Operation canceled by the user.');

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

利用vue-resource請(qǐng)求

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(); 終止請(qǐng)求
    },
  })
  .then(
    (response) => {
      // success callback
    },
    (response) => {
      // error callback
    }
  );

利用fetch請(qǐng)求

fetch貌似無(wú)法監(jiān)控讀取進(jìn)度和終端請(qǐng)求，他沒(méi)有 timeout 機(jī)制，沒(méi)有 progress 提示，但是可以利用 Promise 來(lái)實(shí)現(xiàn)終止

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);

那么知道如何終止請(qǐng)求，然后也存儲(chǔ)了請(qǐng)求實(shí)例，剩下的只要監(jiān)聽(tīng)路由就行了

let router = new Router({....})
//每次路由改變之前終止所有的請(qǐng)求實(shí)例
router.beforeEach(function (to, from, next) {
    this.$store.state.requests.forEach(xhr=>xhr.abort()) //終止所有的請(qǐng)求實(shí)例
    this.$store.state.requests =[] //執(zhí)行完清空，等待下一次的頁(yè)面的請(qǐng)求裝載
    next()
})

這種只是假設(shè)，自然請(qǐng)求完成之后最好，還是手動(dòng)釋放樹(shù)的請(qǐng)求示例。例如ajax請(qǐng)求完成之后在complite里面splice store里面的實(shí)例。

到此，相信大家對(duì)“Vue中路由怎么切換終止異步請(qǐng)求”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！