Artikel yang menerangkan cara untuk menamatkan permintaan tak segerak dengan menukar penghalaan dalam Vue (dengan kod)-View.js-php.cn

Artikel yang menerangkan cara untuk menamatkan permintaan tak segerak dengan menukar penghalaan dalam Vue (dengan kod)

奋力向前

Lepaskan： 2021-08-25 10:16:19

ke hadapan

2616 orang telah melayarinya

Dalam artikel sebelumnya "Analisis mendalam tentang pelaksanaan baris gilir dalam js (perkongsian kod) ", kami mengetahui tentang pelaksanaan baris gilir dalam js. Artikel berikut akan membantu anda memahami cara pensuisan penghalaan menamatkan permintaan tak segerak dalam Vue Ia mempunyai nilai rujukan tertentu. Saya harap ia akan membantu anda.

Artikel yang menerangkan cara untuk menamatkan permintaan tak segerak dengan menukar penghalaan dalam Vue (dengan kod)

Masalah:

Dalam pembangunan mod SPA, seperti VUE, apabila arus laluan ditukar Bagaimana untuk menamatkan permintaan tak segerak yang berterusan.

Keputusan:

Jika permintaan tamat dan terdapat masa tamat yang ditetapkan. Terdapat sekumpulan permintaan tak segerak sedang dilaksanakan Apabila pengguna beralih ke halaman lain, permintaan ini belum ditamatkan dan apabila pelayan bertindak balas, hasil maklum balas tidak seperti yang diharapkan oleh halaman semasa. Akhirnya, ia akan mengelirukan pengguna dan menyebabkan hasil yang tidak perlu. Juga menyebabkan masalah prestasi untuk web.

Penyelesaian:

Simpan permintaan yang dilaksanakan dalam baris gilir dan tamatkan permintaan dalam baris gilir apabila laluan Permintaan tak segerak.

Mula-mula buat pokok untuk menyimpan permintaanBarisan

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

Salin selepas log masuk

Gunakan ajaxpermintaan dan penamatan

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

Salin selepas log masuk

EksploitasisuperagentMinta dan Tamatkan

const request = require(&#39;superagent&#39;)
var xhr = request(&#39;post&#39;,&#39;/api/xxxx/xxxx&#39;)
xhr.send(data)
//xhr.query(data) //get 传参
xhr.end((err,res)=>{
    ...todo...
})
//xhr.abort() 终止请求
this.$store.state.requests.push(xhr)

Salin selepas log masuk

GunakanaxiosPermintaan

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(&#39;Operation canceled by the user.&#39;);

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

Salin selepas log masuk

Gunakanvue-resourceMinta

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

Salin selepas log masuk

Gunakan fetch untuk meminta

fetch nampaknya tidak dapat memantau kemajuan bacaan dan permintaan terminal tidak mempunyai mekanisme tamat masa rehat hanya mendengar laluan

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

Salin selepas log masuk

Ini hanyalah hipotesis Selepas permintaan semula jadi selesai, sebaiknya keluarkan contoh permintaan pokok secara manual. Sebagai contoh, selepas permintaan ajax selesai, contoh dalam stor splice dalam complite.

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

Salin selepas log masuk

[Tamat]
Pembelajaran yang disyorkan:

tutorial vue.js

Atas ialah kandungan terperinci Artikel yang menerangkan cara untuk menamatkan permintaan tak segerak dengan menukar penghalaan dalam Vue (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!