이전 글 "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!