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

成都創(chuàng)新互聯(lián)網(wǎng)絡(luò)公司擁有10余年的成都網(wǎng)站開(kāi)發(fā)建設(shè)經(jīng)驗(yàn)，數(shù)千家客戶的共同信賴。提供做網(wǎng)站、網(wǎng)站制作、網(wǎng)站開(kāi)發(fā)、網(wǎng)站定制、買友情鏈接、建網(wǎng)站、網(wǎng)站搭建、成都響應(yīng)式網(wǎng)站建設(shè)公司、網(wǎng)頁(yè)設(shè)計(jì)師打造企業(yè)風(fēng)格，提供周到的售前咨詢和貼心的售后服務(wù)

問(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) 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í)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！