Ein Artikel, der erklärt, wie man asynchrone Anfragen durch Routing-Switching in Vue beendet (mit Code)

Im vorherigen Artikel „Eingehende Analyse der Warteschlangenimplementierung in js (Code-Sharing)“ haben wir etwas über die Implementierung der Warteschlange in js gelernt. Der folgende Artikel wird Ihnen helfen zu verstehen, wie die Routing-Umschaltung asynchrone Anfragen beendet. Ich hoffe, dass er für Freunde hilfreich ist.

Frage:

Wie kann bei der Entwicklung im SPA-Modus, z. B. VUE, die asynchrone Anforderung beendet werden, die beim Wechsel der aktuellen Route auftritt? . 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

Ergebnis:

Wenn die Anfrage abläuft und ein festgelegtes Timeout vorliegt. Es werden eine Reihe asynchroner Anfragen ausgeführt. Wenn der Benutzer zu einer anderen Seite wechselt, wurden diese Anfragen nicht beendet, und wenn der Server antwortet, entspricht das Feedback-Ergebnis nicht den Erwartungen der aktuellen Seite. Letztendlich führt es Benutzer in die Irre und führt zu unnötigen Ergebnissen. Es verursacht auch Leistungsprobleme für web.

Lösung:

Speichern Sie die ausgeführte Anfrage in der Warteschlange

, wenn die Route gewechselt wird, beenden Sie die asynchrone Anfrage im Warteschlange

.

Erstellen Sie zunächst einen Baum zum Speichern von Anforderungen queue

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

🎜 Nutzen Sie ajax zum Anfordern und Beenden von 🎜🎜

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

🎜🎜Verwenden Sie superagent zum Anfordern und Beenden von 🎜🎜rrreee🎜🎜Verwenden Sie axios zum Anfordern von 🎜🎜rrreee🎜 🎜nutzen Sie vue-resource-Anfragen. 🎜🎜rrreee🎜🎜Verwenden Sie fetch, um anzufordern. 🎜🎜🎜🎜fetch scheint den Lesefortschritt und die Terminalanfragen nicht überwachen zu können. Es gibt keine Timeout-Mechanismus und keine Fortschrittsaufforderung. Sie können jedoch Promise verwenden, um eine Beendigung zu erreichen. Dann wissen Sie, wie Sie die Anforderung beenden und dann auch die Anforderungsinstanz speichern. Der Rest besteht nur darin, die Route abzuhören Dies ist natürlich nur eine Hypothese, es ist am besten, dies manuell zu tun, nachdem die Anfrage abgeschlossen ist. Beispiel für eine Anfrage zur Freigabe eines Baums. Nachdem beispielsweise die Ajax-Anfrage abgeschlossen ist, wird die Instanz im Spleißspeicher vollständig gespeichert. 🎜🎜🎜[Ende]🎜🎜Empfohlenes Lernen: 🎜vue.js Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonEin Artikel, der erklärt, wie man asynchrone Anfragen durch Routing-Switching in Vue beendet (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!