JavaScript が重複したネットワークリクエストを防ぐ方法の例

import { http } from '@/plugin/axios'; // リクエストインターフェース http をインポートします

// 初期化エクスポート関数 getInit(params) {
  http({を返す
    メソッド: 'get'、
    URL: '/xxx/xxx/xx',
    パラメータ、
  });
}

'axios' から axios をインポートします。
import { httpRequest, completeRequest } from './options'; // 実装したいロジックファイルはこちらです // ここでリクエストインターセプションをいくつか行い、具体的なレスポンスインターセプション操作については axios ドキュメントを参照してください const service = axios.create({
  ベースURL: 'xxx/xxx',
});

// リクエストインターセプター service.interceptors.request.use(config => {}, error => {})

// レスポンスインターセプター service.interceptors.response.use(response => {
 completeRequest(response); // 2. レスポンスリクエストが実行のために返される}, error => {
 
})

export function http(config) { // => ここで config は渡されるリクエスト構成パラメータです return httpRequest(config, service); // + 1. ここでいくつかの論理演算を実行します}

/**
 * 責任: 重複したネットワークリクエストを防ぐ*
 */

let list = new Set(); // 1. リクエストキュー // MergeメソッドパラメータURLアドレス function getUrl(config = {}) {
 // リクエストパラメータの取得、パラメータ、ポストリクエストデータパラメータ、baseURL
 const { url, method, params, data, baseURL = '' } = config;
 urlVal = url.replace(baseURL, '');
 `${urlVal}?${method === 'get' ? getformatObjVal(params) : getformatObjVal(data)}` を返します。
}

// URLアドレスの処理 const getformatObjVal = (obj) => {
 obj = typeof obj === 'string' ? JSON.parse(`${obj}`): obj;
 var str = [];
 (pをobjに入れる) {
  obj.hasOwnProperty(p) && p !== '_t' の場合 {
   var item = obj[p] === null ? '' : obj[p]; // nullを処理する
   str.push(encodeURIComponent(p) + '=' + encodeURIComponent(item));
  }
 }
 str.join('&') を返します。
}

// 2. リクエストメソッドのエクスポート function httpRequest(config = {}, axios) {
 const url = getUrl(config); //3. ここで URL アドレスを取得しますif (list.has(url)) { // 4. リクエスト キューに現在の URL アドレスがあるかどうかを確認しますreturn Promise.reject('In the request'); // 5. リクエスト キュー内の現在のリクエストをキャンセルし、Promise の失敗結果を返します}
 
 // 6. リクエスト キューには現在の URL アドレスがありません。リクエストを送信し、URL アドレスをリクエスト キューに格納します。list.add(url);
 Promise.resolve(axios) を返します。 
}

// リクエストレスポンスが返ってきたらこの関数を実行します export function completeRequest(response = {}) {
 const { config } = response; // 1. レスポンス内のconfigは設定パラメータを取得できます const url = getUrl(config); // 2. URLアドレスを取得します if (list.has(url)) {
  list.delete(url); // 3. リクエストキュー内の現在のリクエスト URL アドレスを削除します}
}

'axios' から axios をインポートします。
import { httpRequest, completeRequest } from './options'; // 重複リクエストを防ぐ const service = axios.create({
  ベースURL: 'xxx/xxx',
});

// リクエストインターセプター service.interceptors.request.use(config => {}, error => {})

// レスポンスインターセプター service.interceptors.response.use(response => {
 completeRequest(response); // 2. レスポンスリクエストが戻ってきて実行します +
}, エラー => {
 
})


// エクスポート要求エクスポート関数 http(config) {
  return httpRequest(config, service); // 1. リクエストを送信する前に実行する}

/**
 * すべてのリクエストキューをクリアします */
エクスポート関数clearRequestList() {
 list = new Set(); // ここでクリアするだけです }

'axios' から axios をインポートします。
import { httpRequest, completeRequest, clearRequestList } from './options'; // 重複したリクエストを防ぐ +

constサービス = axios.create({
  ベースURL: 'xxx/xxx',
});

// リクエストインターセプター service.interceptors.request.use(config => {}, error => {})

// レスポンスインターセプター service.interceptors.response.use(response => {
 completeRequest(response); // 2. レスポンスリクエストが実行のために返される}, error => {
 クリアリクエストリスト(); // + 
})


// エクスポート要求エクスポート関数 http(config) {
  return httpRequest(config, service); // 1. リクエストを送信する前に実行する}

/**
 * 責任: 重複したネットワークリクエストを防ぐ*
 */

let list = new Set(); // 1. リクエストキュー // MergeメソッドパラメータURLアドレス function getUrl(config = {}) {
 // リクエストパラメータの取得、パラメータ、ポストリクエストデータパラメータ、baseURL
 const { url, method, params, baseURL = '' } = config;
 urlVal = url.replace(baseURL, '');
 `${urlVal}?${method === 'get' ? getformatObjVal(params) : 'post'}` を返します。
}

// URLアドレスの処理 const getformatObjVal = (obj) => {
 obj = typeof obj === 'string' ? JSON.parse(`${obj}`): obj;
 var str = [];
 (pをobjに入れる) {
  obj.hasOwnProperty(p) && p !== '_t' の場合 {
   var item = obj[p] === null ? '' : obj[p]; // nullを処理する
   str.push(encodeURIComponent(p) + '=' + encodeURIComponent(item));
  }
 }
 str.join('&') を返します。
}

// 2. リクエストメソッドのエクスポート function httpRequest(config = {}, axios) {
 const url = getUrl(config); //3. ここで URL アドレスを取得しますif (list.has(url)) { // 4. リクエスト キューに現在の URL アドレスがあるかどうかを確認しますreturn Promise.reject('In the request'); // 5. リクエスト キュー内の現在のリクエストをキャンセルし、Promise の失敗結果を返します}

 // 6. リクエスト キューには現在の URL アドレスがありません。リクエストを送信し、URL アドレスをリクエスト キューに格納します。list.add(url);
 Promise.resolve(axios) を返します。
}


/**
 * この関数を実行するためのリクエスト応答 */
エクスポート関数 completeRequest(response = {}) {
 const { config } = response; // 1. レスポンス内の config は構成パラメータを取得できます const url = getUrl(config); // 2. URL アドレスを取得します list.has(url) && list.delete(url); // 3. リクエスト キュー内の現在のリクエスト URL アドレスを削除します }

/**
 * すべてのリクエストキューをクリアします */
エクスポート関数 clearRequestList(error) {
 // エラーは構成を取得し、いくつかの操作を実行できます。
 list = new Set(); // ここでクリアするだけです }