ホームページ > ウェブフロントエンド > Vue.js > Vue で非同期リクエストを終了するためのルーティング切り替えを説明した記事 (コード付き)

Vue で非同期リクエストを終了するためのルーティング切り替えを説明した記事 (コード付き)

奋力向前
リリース: 2021-08-25 10:16:19
転載
2626 人が閲覧しました

前回の記事「js でのキュー実装の詳細分析 (コード共有)」では、js でのキューの実装について学びました。以下の記事は、Vue におけるルーティング切り替えによる非同期リクエストの終了方法を理解するのに役立ちます。一定の参考値があり、必要な友人は参照できます。お役に立てれば幸いです。

Vue で非同期リクエストを終了するためのルーティング切り替えを説明した記事 (コード付き)

質問:

SPA モード ( など) の開発においてVUE、現在のルート切り替え時に発生する非同期リクエストを終了する方法。

結果:

リクエストがタイムアウトし、タイムアウトが設定されている場合。多数の非同期リクエストが実行されています。ユーザーが別のページに切り替えても、これらのリクエストは終了しておらず、サーバーが応答したとき、フィードバック結果は現在のページが予期したものではありません。最終的にはユーザーに誤解を与え、不必要な結果を引き起こすことになります。また、web のパフォーマンス上の問題も発生します。

解決策:

実行したリクエストを キュー に格納し、経路切り替え時に キュー を終了します。非同期リクエスト。

最初にリクエストを保存するツリーを作成しますQueue

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,
});
ログイン後にコピー

Useajaxリクエストと終了

var xhr = $.ajax({
  type: "POST",
  url: "xxxsx",
  data: "",
  success: function () {
    alert("ok");
  },
});
//xhr.abort()  终止请求
this.$store.state.requests.push(xhr);
ログイン後にコピー

エクスプロイトスーパーエージェントリクエストと終了

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-resourceRequest

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
    }
  );
ログイン後にコピー

UsefetchRequest

fetch を使用できないようです監視対象 進行状況と端末リクエストの読み取り。タイムアウト メカニズムや進行状況プロンプトはありませんが、Promise を使用して終了を達成できます

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);
ログイン後にコピー

これで、リクエストを終了する方法と、保存する方法がわかりました。リクエスト インスタンス、残りはルートをリッスンするだけです

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

これは単なる仮説です。自然なリクエストが完了したら、ツリー リクエストの例を手動でリリースするのが最善です。たとえば、ajax リクエストが完了すると、スプライス ストア内のインスタンスは完了します。

[終了]

推奨学習: vue.js チュートリアル

以上がVue で非同期リクエストを終了するためのルーティング切り替えを説明した記事 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:chuchur.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート