Ein Beispiel, wie JavaScript doppelte Netzwerkanforderungen verhindern kann

import { http } von '@/plugin/axios'; // Anforderungsschnittstelle http importieren

// Initialisierung Exportfunktion getInit(params) {
  return http({
    Methode: 'get',
    URL: „/xxx/xxx/xx“,
    Parameter,
  });
}

importiere Axios von „Axios“;
import { httpRequest, completeRequest } from './options'; // Hier ist die Logikdatei, die wir implementieren möchten // Führen Sie darin einige Anforderungsabfangvorgänge durch und sehen Sie sich das Axios-Dokument für spezifische Antwortabfangvorgänge an const service = axios.create({
  Basis-URL: 'xxx/xxx',
});

//Interceptor anfordern service.interceptors.request.use(config => {}, error => {})

// Antwort-Interceptor service.interceptors.response.use(response => {
 completeRequest(response); // 2. Antwortanforderung kommt zur Ausführung zurück}, error => {
 
})

export function http(config) { // => Hier ist config der übergebene Anforderungskonfigurationsparameter return httpRequest(config, service); // + 1. Führen Sie hier einige logische Operationen aus}

/**
 * Verantwortung: Doppelte Netzwerkanfragen verhindern*
 */

let list = new Set(); // 1. Anforderungswarteschlange // Merge-Methode Parameter URL-Adresse Funktion getUrl(config = {}) {
 // Anfrageparameter abrufen Parameter Anfragedatenparameter, Basis-URL
 const { URL, Methode, Parameter, Daten, Basis-URL = '' } = Konfiguration;
 const urlVal = url.replace(baseURL, '');
 gibt `${urlVal}?${method === 'get' ? getformatObjVal(params) : getformatObjVal(data)}` zurück;
}

// URL-Adresse wird verarbeitet const getformatObjVal = (obj) => {
 obj = Typ von obj === 'Zeichenfolge' ? JSON.parse(`${obj}`) : obj;
 var str = [];
 für (lass p in obj) {
  wenn (obj.hasOwnProperty(p) und p !== '_t') {
   var item = obj[p] === null ? '' : obj[p]; // null verarbeiten
   str.push(encodeURIComponent(p) + '=' + encodeURIComponent(item));
  }
 }
 str.join('&') zurückgeben;
}

// 2. Anforderungsmethode export function httpRequest(config = {}, axios) {
 const url = getUrl(config); //3. Hier erhalten wir die URL-Adresseif (list.has(url)) { // 4. Überprüfen Sie, ob die Anforderungswarteschlange die aktuelle URL-Adresse hatreturn Promise.reject('In der Anforderung'); // 5. Brechen Sie die aktuelle Anforderung in der Anforderungswarteschlange ab und geben Sie das Promise-Fehlerergebnis zurück}
 
 // 6. Die Anforderungswarteschlange verfügt nicht über die aktuelle URL-Adresse. Senden Sie die Anforderung und speichern Sie die URL-Adresse in der Anforderungswarteschlange.list.add(url);
 gibt Promise.resolve(axios) zurück; 
}

// Führen Sie diese Funktion aus, nachdem die Anforderungsantwort zurückkommt. Exportfunktion completeRequest(response = {}) {
 const { config } = response; // 1. Die Konfiguration in der Antwort kann die Konfigurationsparameter abrufen const url = getUrl(config); // 2. Die URL-Adresse abrufen if (list.has(url)) {
  list.delete(url); // 3. Lösche die aktuelle Anforderungs-URL-Adresse in der Anforderungswarteschlange}
}

importiere Axios von „Axios“;
importiere { httpRequest, completeRequest } von './options'; // Doppelte Anfragen verhindern const service = axios.create({
  Basis-URL: 'xxx/xxx',
});

//Interceptor anfordern service.interceptors.request.use(config => {}, error => {})

// Antwort-Interceptor service.interceptors.response.use(response => {
 completeRequest(response); // 2. Antwortanforderung kommt zur Ausführung zurück +
}, Fehler => {
 
})


// Anfrage exportieren export function http(config) {
  return httpRequest(config, service); // 1. Vor dem Senden der Anfrage ausführen}

/**
 * Alle Anforderungswarteschlangen löschen */
Exportfunktion clearRequestList() {
 list = new Set(); // Ich lösche es einfach hier }

importiere Axios von „Axios“;
importiere { httpRequest, completeRequest, clearRequestList } von './options'; // Doppelte Anfragen verhindern +

const service = axios.create({
  Basis-URL: 'xxx/xxx',
});

//Interceptor anfordern service.interceptors.request.use(config => {}, error => {})

// Antwort-Interceptor service.interceptors.response.use(response => {
 completeRequest(response); // 2. Antwortanforderung kommt zur Ausführung zurück}, error => {
 Anforderungsliste löschen(); // + 
})


// Anfrage exportieren export function http(config) {
  return httpRequest(config, service); // 1. Vor dem Senden der Anfrage ausführen}

/**
 * Verantwortung: Doppelte Netzwerkanfragen verhindern*
 */

let list = new Set(); // 1. Anforderungswarteschlange // Merge-Methode Parameter URL-Adresse Funktion getUrl(config = {}) {
 // Anfrageparameter abrufen Parameter Anfragedatenparameter, Basis-URL
 const { url, method, params, baseURL = '' } = konfiguration;
 const urlVal = url.replace(baseURL, '');
 gibt `${urlVal}?${method === 'get' ? getformatObjVal(params) : 'post'}` zurück;
}

// URL-Adresse wird verarbeitet const getformatObjVal = (obj) => {
 obj = Typ von obj === 'Zeichenfolge' ? JSON.parse(`${obj}`) : obj;
 var str = [];
 für (lass p in obj) {
  wenn (obj.hasOwnProperty(p) und p !== '_t') {
   var item = obj[p] === null ? '' : obj[p]; // null verarbeiten
   str.push(encodeURIComponent(p) + '=' + encodeURIComponent(item));
  }
 }
 str.join('&') zurückgeben;
}

// 2. Anforderungsmethode export function httpRequest(config = {}, axios) {
 const url = getUrl(config); //3. Hier erhalten wir die URL-Adresseif (list.has(url)) { // 4. Überprüfen Sie, ob die Anforderungswarteschlange die aktuelle URL-Adresse hatreturn Promise.reject('In der Anforderung'); // 5. Brechen Sie die aktuelle Anforderung in der Anforderungswarteschlange ab und geben Sie das Promise-Fehlerergebnis zurück}

 // 6. Die Anforderungswarteschlange verfügt nicht über die aktuelle URL-Adresse. Senden Sie die Anforderung und speichern Sie die URL-Adresse in der Anforderungswarteschlange.list.add(url);
 gibt Promise.resolve(axios) zurück;
}


/**
 * Antwort anfordern, um diese Funktion auszuführen */
Exportfunktion CompleteRequest (Antwort = {}) {
 const { config } = response; // 1. config kann in der Antwort Konfigurationsparameter abrufen const url = getUrl(config); // 2. URL-Adresse abrufen list.has(url) && list.delete(url); // 3. Aktuelle Anforderungs-URL-Adresse in der Anforderungswarteschlange löschen }

/**
 * Alle Anforderungswarteschlangen löschen */
Exportfunktion ClearRequestList (Fehler) {
 // Fehler kann die Konfiguration abrufen und einige Vorgänge ausführen.
 list = new Set(); // Ich lösche es einfach hier }