Un article expliquant comment terminer les requêtes asynchrones en commutant le routage dans Vue (avec code)

Dans l'article précédent "Analyse approfondie de l'implémentation de la file d'attente en js (partage de code)", nous avons découvert l'implémentation de la file d'attente en js. L'article suivant vous aidera à comprendre comment la commutation de routage termine les requêtes asynchrones dans Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Question :

Dans le développement en mode SPA, tel que VUE, comment mettre fin à la requête asynchrone qui se produit lorsque l'itinéraire actuel est commuté . 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

Résultat :

Si la demande expire et qu'il y a un délai d'attente défini. De nombreuses requêtes asynchrones sont en cours d'exécution. Lorsque l'utilisateur passe à une autre page, ces requêtes ne sont pas terminées et lorsque le serveur répond, le résultat du retour n'est pas celui attendu par la page actuelle. En fin de compte, cela induirait les utilisateurs en erreur et entraînerait des résultats inutiles. Cela entraîne également des problèmes de performances pour le web.

Solution :

Enregistrez la requête exécutée dans la file d'attente

, lorsque la route est commutée, terminez la requête asynchrone dans le file d'attente

.

Créez d'abord un arbre pour stocker les requêtes file d'attente

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

🎜 Utiliser ajax pour demander et résilier 🎜🎜

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

🎜🎜Utilisez superagent pour demander et résilier 🎜🎜rrreee🎜🎜Utilisez axios pour demander 🎜🎜rrreee🎜 🎜Utilisez les requêtes vue-resource 🎜🎜rrreee🎜🎜Utilisez fetch pour demander 🎜🎜🎜🎜fetch semble incapable de surveiller la progression de la lecture et les requêtes du terminal. mécanisme de délai d'attente et aucune invite de progression. Mais vous pouvez utiliser Promise pour obtenir la terminaison🎜🎜rrreee🎜 Ensuite, vous savez comment mettre fin à la requête, puis également stocker l'instance de requête. Le reste consiste simplement à écouter la route🎜rrreee🎜🎜Ceci. n'est qu'une hypothèse. Naturellement, une fois la demande terminée, il est préférable de le faire manuellement. Exemple de demande de libération d'un arbre. Par exemple, une fois la requête ajax terminée, l'instance dans le magasin d'épissure est complète. 🎜🎜🎜[Fin]🎜🎜Apprentissage recommandé : 🎜Tutoriel vue.js🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!