비동기 요청을 종료하기 위해 Vue에서 라우팅 전환을 설명하는 기사(코드 포함)

이전 글 "js에서의 큐 구현 심층 분석(코드 공유)"에서는 js에서의 큐 구현에 대해 알아보았습니다. 다음 기사는 Vue에서 라우팅 전환이 비동기 요청을 종료하는 방법을 이해하는 데 도움이 될 것입니다. 이는 특정 참조 값을 가지고 있으므로 도움이 필요할 수 있습니다.

질문:

VUE와 같은 SPA 모드 개발에서 현재 경로가 전환될 때 발생하는 비동기 요청을 종료하는 방법 . 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

결과:

요청 시간이 초과되고 설정된 시간 초과가 있는 경우. 사용자가 다른 페이지로 전환하면 이러한 요청이 종료되지 않고 서버가 응답할 때 피드백 결과가 현재 페이지에서 기대하는 것과 다릅니다. 결국 사용자를 오도하고 불필요한 결과를 초래하게 됩니다. 또한 웹에 성능 문제가 발생합니다.

해결책:

실행된 요청을 대기열에 저장하고

경로가 전환되면 큐

.

먼저 요청을 저장할 트리를 만듭니다 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);

🎜 활용 ajax를 사용하여 🎜🎜

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

🎜🎜요청 및 종료하려면 superagent 사용 🎜🎜rrreee🎜🎜axios를 사용하여 🎜🎜rrreee🎜 요청 🎜vue-resource 요청 활용 🎜🎜rrreee🎜🎜fetch를 사용하여 🎜🎜🎜🎜fetch를 요청하면 읽기 진행 상황과 터미널 요청을 모니터링할 수 없는 것 같습니다. 시간 초과 메커니즘 및 진행 프롬프트 없음 하지만 Promise를 사용하여 종료할 수 있습니다🎜🎜rrreee🎜 그런 다음 요청을 종료하고 요청 인스턴스를 저장하는 방법도 알고 있습니다. 나머지는 경로를 듣는 것뿐입니다🎜rrreee🎜🎜 물론, 요청이 완료된 후 수동으로 수행하는 것이 가장 좋습니다. 트리 해제 요청의 예입니다. 예를 들어, ajax 요청이 완료된 후 splice 저장소의 인스턴스는 complite에 저장됩니다. 🎜🎜🎜[끝]🎜🎜추천 학습: 🎜vue.js 튜토리얼🎜🎜

위 내용은 비동기 요청을 종료하기 위해 Vue에서 라우팅 전환을 설명하는 기사(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!