An example of how JavaScript can prevent duplicate network requests

import { http } from '@/plugin/axios'; // Import request interface http

// Initialization export function getInit(params) {
  return http({
    method: 'get',
    url: '/xxx/xxx/xx',
    params,
  });
}

import axios from 'axios';
import { httpRequest, completeRequest } from './options'; // Here is the logic file we want to implement // Do some request interception in it, and see the axios document for specific response interception operations const service = axios.create({
  baseURL: 'xxx/xxx',
});

// Request interceptor service.interceptors.request.use(config => {}, error => {})

// Response interceptor service.interceptors.response.use(response => {
 completeRequest(response); // 2. Response request comes back for execution}, error => {
 
})

export function http(config) { // => Here config is the request configuration parameter passed return httpRequest(config, service); // + 1. Do some logical operations here}

/**
 * Responsibility: Prevent duplicate network requests*
 */

let list = new Set(); // 1. Request queue // Merge method parameter url address function getUrl(config = {}) {
 // Get request params parameters post request data parameters, baseURL
 const { url, method, params, data, baseURL = '' } = config;
 const urlVal = url.replace(baseURL, '');
 return `${urlVal}?${method === 'get' ? getformatObjVal(params) : getformatObjVal(data)}`;
}

// Processing URL address const getformatObjVal = (obj) => {
 obj = typeof obj === 'string' ? JSON.parse(`${obj}`) : obj;
 var str = [];
 for (let p in obj) {
  if (obj.hasOwnProperty(p) && p !== '_t') {
   var item = obj[p] === null ? '' : obj[p]; // handle null
   str.push(encodeURIComponent(p) + '=' + encodeURIComponent(item));
  }
 }
 return str.join('&');
}

// 2. Request method export function httpRequest(config = {}, axios) {
 const url = getUrl(config); //3. Here we get the URL addressif (list.has(url)) { // 4. Check if the request queue has the current url addressreturn Promise.reject('In the request'); // 5. Cancel the current request in the request queue and return the Promise failure result}
 
 // 6. The request queue does not have the current URL address. Send the request and store the URL address in the request queue.list.add(url);
 return Promise.resolve(axios); 
}

// Execute this function after the request response comes back export function completeRequest(response = {}) {
 const { config } = response; // 1. The config in response can get the configuration parameters const url = getUrl(config); // 2. Get the url address if (list.has(url)) {
  list.delete(url); // 3. Delete the current request url address in the request queue}
}

import axios from 'axios';
import { httpRequest, completeRequest } from './options'; // Prevent duplicate requests const service = axios.create({
  baseURL: 'xxx/xxx',
});

// Request interceptor service.interceptors.request.use(config => {}, error => {})

// Response interceptor service.interceptors.response.use(response => {
 completeRequest(response); // 2. Response request comes back to execute +
}, error => {
 
})


// Export request export function http(config) {
  return httpRequest(config, service); // 1. Execute before sending the request}

/**
 * Clear all request queues */
export function clearRequestList() {
 list = new Set(); // I just clear it here }

import axios from 'axios';
import { httpRequest, completeRequest, clearRequestList } from './options'; // Prevent duplicate requests +

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

// Request interceptor service.interceptors.request.use(config => {}, error => {})

// Response interceptor service.interceptors.response.use(response => {
 completeRequest(response); // 2. Response request comes back for execution}, error => {
 clearRequestList(); // + 
})


// Export request export function http(config) {
  return httpRequest(config, service); // 1. Execute before sending the request}

/**
 * Responsibility: Prevent duplicate network requests*
 */

let list = new Set(); // 1. Request queue // Merge method parameter url address function getUrl(config = {}) {
 // Get request params parameters post request data parameters, baseURL
 const { url, method, params, baseURL = '' } = config;
 const urlVal = url.replace(baseURL, '');
 return `${urlVal}?${method === 'get' ? getformatObjVal(params) : 'post'}`;
}

// Processing URL address const getformatObjVal = (obj) => {
 obj = typeof obj === 'string' ? JSON.parse(`${obj}`) : obj;
 var str = [];
 for (let p in obj) {
  if (obj.hasOwnProperty(p) && p !== '_t') {
   var item = obj[p] === null ? '' : obj[p]; // handle null
   str.push(encodeURIComponent(p) + '=' + encodeURIComponent(item));
  }
 }
 return str.join('&');
}

// 2. Request method export function httpRequest(config = {}, axios) {
 const url = getUrl(config); //3. Here we get the URL addressif (list.has(url)) { // 4. Check if the request queue has the current url addressreturn Promise.reject('In the request'); // 5. Cancel the current request in the request queue and return the Promise failure result}

 // 6. The request queue does not have the current URL address. Send the request and store the URL address in the request queue.list.add(url);
 return Promise.resolve(axios);
}


/**
 * Request response to execute this function */
export function completeRequest(response = {}) {
 const { config } = response; // 1. config in response can get configuration parameters const url = getUrl(config); // 2. Get the url address list.has(url) && list.delete(url); // 3. Delete the current request url address in the request queue }

/**
 * Clear all request queues */
export function clearRequestList(error) {
 // error can get the configuration and do some operations.
 list = new Set(); // I just clear it here }