JavaScript如何實(shí)現(xiàn)防止重復(fù)的網(wǎng)絡(luò)請(qǐng)求的示例
前言
在開發(fā)中，經(jīng)常會(huì)遇到接口重復(fù)請(qǐng)求導(dǎo)致的各種問題。
對(duì)于重復(fù)的網(wǎng)絡(luò)請(qǐng)求，會(huì)導(dǎo)致頁面更新多次，發(fā)生頁面抖動(dòng)的現(xiàn)象，影響用戶體驗(yàn)。
例如當(dāng)前頁面請(qǐng)求還未響應(yīng)完成，就切換到其他路由，那么這些請(qǐng)求直到響應(yīng)返回才會(huì)中止。
無論從用戶體驗(yàn)或者從業(yè)務(wù)嚴(yán)謹(jǐn)方面來說，取消無用的請(qǐng)求確實(shí)是需要避免的。
實(shí)現(xiàn)思路
** 1.在發(fā)送請(qǐng)求前先攔截當(dāng)前請(qǐng)求地址 （url + 方法 + 參數(shù)）；
** 2.開啟一個(gè)請(qǐng)求隊(duì)列用于保存 當(dāng)前地址；
** 3.每次請(qǐng)求查看請(qǐng)求隊(duì)列里面有沒有當(dāng)前url地址；
** 4.如果請(qǐng)求隊(duì)列里有當(dāng)前url地址就取消當(dāng)前請(qǐng)求，
** 5.如果沒有就發(fā)送請(qǐng)求，當(dāng)請(qǐng)求數(shù)據(jù)返回后，請(qǐng)求隊(duì)列里清除當(dāng)前url地址。
1.平時(shí)我們寫接口是這樣的：
請(qǐng)求接口文件
import { http } from '@/plugin/axios'; // 導(dǎo)入請(qǐng)求接口 http
// 初始化
export function getInit(params) {
return http({
method: 'get',
url: '/xxx/xxx/xx',
params,
});
}
主要就是這里執(zhí)行 http方法的時(shí)候做操作；
執(zhí)行http函數(shù)的時(shí)候能獲取到請(qǐng)求所有配置 config ，返回promise對(duì)象。
2.這里演示使用axios，思路是執(zhí)行請(qǐng)求函數(shù)的時(shí)候外面包一層
axios.js配置文件
import axios from 'axios';
import { httpRequest, completeRequest } from './options'; // 這里就是我們要實(shí)現(xiàn)的邏輯文件
// 里面做一些請(qǐng)求攔截，響應(yīng)攔截操作 具體查看axios文檔
const service = axios.create({
baseURL: 'xxx/xxx',
});
// 請(qǐng)求攔截器
service.interceptors.request.use(config => {}, error => {})
// 響應(yīng)攔截器
service.interceptors.response.use(response => {
completeRequest(response); // 2.響應(yīng)請(qǐng)求回來執(zhí)行
}, error => {
})
export function http(config) { // => 這里config就是傳遞的請(qǐng)求配置參數(shù)
return httpRequest(config, service); // + 1.在這里做一些邏輯操作
}
3.防止重復(fù)網(wǎng)絡(luò)配置文件
options.js
（1）發(fā)送請(qǐng)求前，查看請(qǐng)求隊(duì)列里是否有當(dāng)前請(qǐng)求（url地址來判斷）
- 請(qǐng)求隊(duì)列有當(dāng)前url地址， 取消請(qǐng)求 返回promise.reject失敗
- 沒有當(dāng)前請(qǐng)求，正常發(fā)送請(qǐng)求；
/**
* 職責(zé)： 防止重復(fù)的網(wǎng)絡(luò)請(qǐng)求
*
*/
let list = new Set(); // 1.請(qǐng)求隊(duì)列
// 合并 方法 參數(shù) url地址
function getUrl(config = {}) {
// get請(qǐng)求 params參數(shù) post請(qǐng)求 data參數(shù), baseURL
const { url, method, params, data, baseURL = '' } = config;
const urlVal = url.replace(baseURL, '');
return `${urlVal}?${method === 'get' ? getformatObjVal(params) : getformatObjVal(data)}`;
}
// 處理 url地址
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]; // 處理null
str.push(encodeURIComponent(p) + '=' + encodeURIComponent(item));
}
}
return str.join('&');
}
// 2.請(qǐng)求方法
export function httpRequest(config = {}, axios) {
const url = getUrl(config); //3. 這里我們獲取到了URL地址
if (list.has(url)) { // 4.查看請(qǐng)求隊(duì)列是否有當(dāng)前url地址
return Promise.reject('In the request'); // 5.在請(qǐng)求隊(duì)列里面 取消當(dāng)前請(qǐng)求， 返回Promise失敗結(jié)果
}
// 6. 請(qǐng)求隊(duì)列沒有當(dāng)前url地址 發(fā)送請(qǐng)求并把url地址存入請(qǐng)求隊(duì)列里
list.add(url);
return Promise.resolve(axios);
}
（2）請(qǐng)求響應(yīng)回來后，在請(qǐng)求隊(duì)列里刪除當(dāng)前url地址； （下一次請(qǐng)求就可以正常發(fā)送）
options.js
// 請(qǐng)求響應(yīng)回來執(zhí)行這個(gè)函數(shù)
export function completeRequest(response = {}) {
const { config } = response; // 1.response里面config能拿到配置參數(shù)
const url = getUrl(config); // 2.獲取url地址
if (list.has(url)) {
list.delete(url); // 3.刪除請(qǐng)求隊(duì)列中的當(dāng)前請(qǐng)求url地址
}
}
axios.js
import axios from 'axios';
import { httpRequest, completeRequest } from './options'; // 防止重復(fù)請(qǐng)求
const service = axios.create({
baseURL: 'xxx/xxx',
});
// 請(qǐng)求攔截器
service.interceptors.request.use(config => {}, error => {})
// 響應(yīng)攔截器
service.interceptors.response.use(response => {
completeRequest(response); // 2.響應(yīng)請(qǐng)求回來執(zhí)行 +
}, error => {
})
// 導(dǎo)出請(qǐng)求
export function http(config) {
return httpRequest(config, service); // 1.發(fā)送請(qǐng)求前執(zhí)行
}
到這里已經(jīng)實(shí)現(xiàn)了防止重復(fù)的網(wǎng)絡(luò)請(qǐng)求，但還有一個(gè)問題，響應(yīng)請(qǐng)求發(fā)生異常了要清除請(qǐng)求隊(duì)列中當(dāng)前url地址。不清理，下一次發(fā)送請(qǐng)求直接被取消掉 （這里我就隨便寫了一個(gè)方法，把請(qǐng)求隊(duì)列全部清空，大家可以按自己場景來寫）。
/**
* 清空所有請(qǐng)求隊(duì)列
*/
export function clearRequestList() {
list = new Set(); // 這里我就直接清空了
}
完整http.js文件
import axios from 'axios';
import { httpRequest, completeRequest, clearRequestList } from './options'; // 防止重復(fù)請(qǐng)求 +
const service = axios.create({
baseURL: 'xxx/xxx',
});
// 請(qǐng)求攔截器
service.interceptors.request.use(config => {}, error => {})
// 響應(yīng)攔截器
service.interceptors.response.use(response => {
completeRequest(response); // 2.響應(yīng)請(qǐng)求回來執(zhí)行
}, error => {
clearRequestList(); // +
})
// 導(dǎo)出請(qǐng)求
export function http(config) {
return httpRequest(config, service); // 1.發(fā)送請(qǐng)求前執(zhí)行
}
完整options.js
/**
* 職責(zé)： 防止重復(fù)的網(wǎng)絡(luò)請(qǐng)求
*
*/
let list = new Set(); // 1.請(qǐng)求隊(duì)列
// 合并 方法 參數(shù) url地址
function getUrl(config = {}) {
// get請(qǐng)求 params參數(shù) post請(qǐng)求 data參數(shù), baseURL
const { url, method, params, baseURL = '' } = config;
const urlVal = url.replace(baseURL, '');
return `${urlVal}?${method === 'get' ? getformatObjVal(params) : 'post'}`;
}
// 處理 url地址
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]; // 處理null
str.push(encodeURIComponent(p) + '=' + encodeURIComponent(item));
}
}
return str.join('&');
}
// 2.請(qǐng)求方法
export function httpRequest(config = {}, axios) {
const url = getUrl(config); //3. 這里我們獲取到了URL地址
if (list.has(url)) { // 4.查看請(qǐng)求隊(duì)列是否有當(dāng)前url地址
return Promise.reject('In the request'); // 5.在請(qǐng)求隊(duì)列里面 取消當(dāng)前請(qǐng)求， 返回Promise失敗結(jié)果
}
// 6. 請(qǐng)求隊(duì)列沒有當(dāng)前url地址 發(fā)送請(qǐng)求并把url地址存入請(qǐng)求隊(duì)列里
list.add(url);
return Promise.resolve(axios);
}
/**
* 請(qǐng)求響應(yīng)回來執(zhí)行這個(gè)函數(shù)
*/
export function completeRequest(response = {}) {
const { config } = response; // 1.response里面config能拿到配置參數(shù)
const url = getUrl(config); // 2.獲取url地址
list.has(url) && list.delete(url); // 3.刪除請(qǐng)求隊(duì)列中的當(dāng)前請(qǐng)求url地址
}
/**
* 清空所有請(qǐng)求隊(duì)列
*/
export function clearRequestList(error) {
// error 可以獲取到配置， 做一些操作。
list = new Set(); // 這里我就直接清空了
}
以上就是我實(shí)現(xiàn)防止網(wǎng)絡(luò)請(qǐng)求的方式，之前我有使用過axios中CancelToken來進(jìn)行取消請(qǐng)求；當(dāng)會(huì)有一些問題。
- 需要配置請(qǐng)求文件，不友好，團(tuán)隊(duì)開發(fā)配置也比較麻煩。
- 需要給每個(gè)請(qǐng)求都配置CancelToken。 有兩個(gè)方法使用它 具體可以參考官網(wǎng)文檔
到此這篇關(guān)于JavaScript如何實(shí)現(xiàn)防止重復(fù)的網(wǎng)絡(luò)請(qǐng)求的示例的文章就介紹到這了,更多相關(guān)JavaScript 防止重復(fù)的網(wǎng)絡(luò)請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
clipboard.js在移動(dòng)端復(fù)制失敗的解決方法
最近在使用clipboard.js碰到的一個(gè)小問題，通過查找相關(guān)資料解決了，所以下面這篇文章主要給大家介紹了關(guān)于clipboard.js在移動(dòng)端復(fù)制失敗的解決方法，需要的朋友可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧2018-06-06
JavaScript可以說是最讓人初學(xué)者難以理解的單一屬性。我看了一些資料后，開始明白其實(shí)這些困難很大程度來自prototype這個(gè)名字本身的二義性2012-02-02
JavaScript Window瀏覽器對(duì)象模型原理解析
這篇文章主要介紹了JavaScript Window瀏覽器對(duì)象模型,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
詳解CocosCreator優(yōu)化之DrawCall
這篇文章主要介紹了CocosCreator中DrawCall的優(yōu)化，想研究游戲性能的同學(xué)，一定要看一看2021-04-04
js上下視差滾動(dòng)簡單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了js上下視差滾動(dòng)的簡單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
最近在網(wǎng)上查閱了不少Javascript閉包(closure)相關(guān)的資料，寫的大多是非常的學(xué)術(shù)和專業(yè)。對(duì)于初學(xué)者來說別說理解閉包了，就連文字?jǐn)⑹龆己茈y看懂。撰寫此文的目的就是用最通俗的文字揭開Javascript閉包的真實(shí)面目。2010-12-12
其實(shí)在學(xué)習(xí)之前，就已經(jīng)用上了js，jquery和ajax，不過當(dāng)時(shí)不清楚這些的區(qū)別，就全都當(dāng)成js來看，然后別人一說jquery，ajax都覺得好像很高級(jí)，等到自己學(xué)習(xí)的時(shí)候，倒是對(duì)這些更清楚了一點(diǎn)，下面就來寫一下我的總結(jié)2016-01-01
JavaScript中rxjs與?Observable?兩大類操作符解析
這篇文章主要介紹了JavaScript中rxjs與?Observable?兩大類操作符解析,運(yùn)算符是對(duì)?Observable?進(jìn)行操作并返回?Observable?的函數(shù)，文章圍繞主題展開詳細(xì)內(nèi)容，需要的小伙伴可以參考一下2022-07-07
javascript下搜索子字符串的的實(shí)現(xiàn)代碼(腳本之家修正版)
由于我的項(xiàng)目中要求到要對(duì)一個(gè)字符串進(jìn)行查找，其查找要求有點(diǎn)BT了2009-12-12
JS實(shí)現(xiàn)排行榜文字向上滾動(dòng)輪播效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)排行榜文字向上滾動(dòng)輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11