• 售前

  • 售后

热门帖子
入门百科

JavaScript怎样实现防止重复的网络哀求的示例

[复制链接]
里干整团 显示全部楼层 发表于 2021-10-25 19:30:00 |阅读模式 打印 上一主题 下一主题
前言

在开发中,经常会碰到接口重复请求导致的各种标题。
对于重复的网络请求,会导致页面更新多次,发生页面抖动的现象,影响用户体验。
例如当前页面请求还未相应完成,就切换到其他路由,那么这些请求直到相应返回才会制止。
无论从用户体验大概从业务严谨方面来说,取消无用的请求确实是需要克制的。
实现思路


**  1.在发送请求前先拦截当前请求地址 (url + 方法 + 参数);
**  2.开启一个请求队列用于保存 当前地址;
**  3.每次请求查看请求队列里面有没有当前url地址;
**  4.假如请求队列里有当前url地址就取消当前请求,
**  5.假如没有就发送请求,当请求数据返回后,请求队列里清除当前url地址。
1.平时我们写接口是如许的:


请求接口文件
  1. import { http } from '@/plugin/axios'; // 导入请求接口 http
  2. // 初始化
  3. export function getInit(params) {
  4.   return http({
  5.     method: 'get',
  6.     url: '/xxx/xxx/xx',
  7.     params,
  8.   });
  9. }
复制代码
重要就是这里执行 http方法的时候做操纵;
执行http函数的时候能获取到请责备部设置 config ,返回promise对象。

2.这里演示利用axios,思路是执行请求函数的时候外面包一层


axios.js设置文件
  1. import axios from 'axios';
  2. import { httpRequest, completeRequest } from './options'; // 这里就是我们要实现的逻辑文件
  3. // 里面做一些请求拦截,响应拦截操作 具体查看axios文档
  4. const service = axios.create({
  5.   baseURL: 'xxx/xxx',
  6. });
  7. // 请求拦截器
  8. service.interceptors.request.use(config => {}, error => {})
  9. // 响应拦截器
  10. service.interceptors.response.use(response => {
  11. completeRequest(response); // 2.响应请求回来执行
  12. }, error => {
  13. })
  14. export function http(config) { // => 这里config就是传递的请求配置参数
  15.   return httpRequest(config, service); // + 1.在这里做一些逻辑操作
  16. }
复制代码
3.防止重复网络设置文件


options.js
(1)发送请求前,查看请求队列里是否有当前请求(url地址来判定)
      
  • 请求队列有当前url地址, 取消请求  返回promise.reject失败  
  • 没有当前请求,正常发送请求;
  1. /**
  2. * 职责: 防止重复的网络请求
  3. *
  4. */
  5. let list = new Set(); // 1.请求队列
  6. // 合并 方法 参数 url地址
  7. function getUrl(config = {}) {
  8. // get请求 params参数 post请求 data参数, baseURL
  9. const { url, method, params, data, baseURL = '' } = config;
  10. const urlVal = url.replace(baseURL, '');
  11. return `${urlVal}?${method === 'get' ? getformatObjVal(params) : getformatObjVal(data)}`;
  12. }
  13. // 处理 url地址
  14. const getformatObjVal = (obj) => {
  15. obj = typeof obj === 'string' ? JSON.parse(`${obj}`) : obj;
  16. var str = [];
  17. for (let p in obj) {
  18.   if (obj.hasOwnProperty(p) && p !== '_t') {
  19.    var item = obj[p] === null ? '' : obj[p]; // 处理null
  20.    str.push(encodeURIComponent(p) + '=' + encodeURIComponent(item));
  21.   }
  22. }
  23. return str.join('&');
  24. }
  25. // 2.请求方法
  26. export function httpRequest(config = {}, axios) {
  27. const url = getUrl(config); //3. 这里我们获取到了URL地址
  28. if (list.has(url)) { // 4.查看请求队列是否有当前url地址
  29.   return Promise.reject('In the request'); // 5.在请求队列里面 取消当前请求, 返回Promise失败结果
  30. }
  31. // 6. 请求队列没有当前url地址 发送请求并把url地址存入请求队列里
  32. list.add(url);
  33. return Promise.resolve(axios);
  34. }
复制代码
(2)请求相应回来后,在请求队列里删除当前url地址; (下一次请求就可以正常发送)
​ options.js
  1. // 请求响应回来执行这个函数
  2. export function completeRequest(response = {}) {
  3. const { config } = response; // 1.response里面config能拿到配置参数
  4. const url = getUrl(config); // 2.获取url地址
  5. if (list.has(url)) {
  6.   list.delete(url); // 3.删除请求队列中的当前请求url地址
  7. }
  8. }
复制代码
axios.js
  1. import axios from 'axios';
  2. import { httpRequest, completeRequest } from './options'; // 防止重复请求
  3. const service = axios.create({
  4.   baseURL: 'xxx/xxx',
  5. });
  6. // 请求拦截器
  7. service.interceptors.request.use(config => {}, error => {})
  8. // 响应拦截器
  9. service.interceptors.response.use(response => {
  10. completeRequest(response); // 2.响应请求回来执行 +
  11. }, error => {
  12. })
  13. // 导出请求
  14. export function http(config) {
  15.   return httpRequest(config, service); // 1.发送请求前执行
  16. }
复制代码
到这里已经实现了防止重复的网络请求,但另有一个标题,相应请求发生非常了要清除请求队列中当前url地址。不整理,下一次发送请求直接被取消掉 (这里我就任意写了一个方法,把请求队列全部清空,大家可以按自己场景来写)。
  1. /**
  2. * 清空所有请求队列
  3. */
  4. export function clearRequestList() {
  5. list = new Set(); // 这里我就直接清空了
  6. }
复制代码
完整http.js文件
  1. import axios from 'axios';
  2. import { httpRequest, completeRequest, clearRequestList } from './options'; // 防止重复请求 +
  3. const service = axios.create({
  4.   baseURL: 'xxx/xxx',
  5. });
  6. // 请求拦截器
  7. service.interceptors.request.use(config => {}, error => {})
  8. // 响应拦截器
  9. service.interceptors.response.use(response => {
  10. completeRequest(response); // 2.响应请求回来执行
  11. }, error => {
  12. clearRequestList(); // +
  13. })
  14. // 导出请求
  15. export function http(config) {
  16.   return httpRequest(config, service); // 1.发送请求前执行
  17. }
复制代码
完整options.js
  1. /**
  2. * 职责: 防止重复的网络请求
  3. *
  4. */
  5. let list = new Set(); // 1.请求队列
  6. // 合并 方法 参数 url地址
  7. function getUrl(config = {}) {
  8. // get请求 params参数 post请求 data参数, baseURL
  9. const { url, method, params, baseURL = '' } = config;
  10. const urlVal = url.replace(baseURL, '');
  11. return `${urlVal}?${method === 'get' ? getformatObjVal(params) : 'post'}`;
  12. }
  13. // 处理 url地址
  14. const getformatObjVal = (obj) => {
  15. obj = typeof obj === 'string' ? JSON.parse(`${obj}`) : obj;
  16. var str = [];
  17. for (let p in obj) {
  18.   if (obj.hasOwnProperty(p) && p !== '_t') {
  19.    var item = obj[p] === null ? '' : obj[p]; // 处理null
  20.    str.push(encodeURIComponent(p) + '=' + encodeURIComponent(item));
  21.   }
  22. }
  23. return str.join('&');
  24. }
  25. // 2.请求方法
  26. export function httpRequest(config = {}, axios) {
  27. const url = getUrl(config); //3. 这里我们获取到了URL地址
  28. if (list.has(url)) { // 4.查看请求队列是否有当前url地址
  29.   return Promise.reject('In the request'); // 5.在请求队列里面 取消当前请求, 返回Promise失败结果
  30. }
  31. // 6. 请求队列没有当前url地址 发送请求并把url地址存入请求队列里
  32. list.add(url);
  33. return Promise.resolve(axios);
  34. }
  35. /**
  36. * 请求响应回来执行这个函数
  37. */
  38. export function completeRequest(response = {}) {
  39. const { config } = response; // 1.response里面config能拿到配置参数
  40. const url = getUrl(config); // 2.获取url地址
  41. list.has(url) && list.delete(url); // 3.删除请求队列中的当前请求url地址
  42. }
  43. /**
  44. * 清空所有请求队列
  45. */
  46. export function clearRequestList(error) {
  47. // error 可以获取到配置, 做一些操作。
  48. list = new Set(); // 这里我就直接清空了
  49. }
复制代码
以上就是我实现防止网络请求的方式,之前我有利用过axios中CancelToken来举行取消请求;当会有一些标题。
      
  • 需要设置请求文件,不友好,团队开发设置也比力贫苦。  
  • 需要给每个请求都设置CancelToken。  有两个方法利用它 详细可以参考官网文档
到此这篇关于JavaScript如何实现防止重复的网络请求的示例的文章就介绍到这了,更多相干JavaScript 防止重复的网络请求内容请搜索草根技术分享以前的文章或继续浏览下面的相干文章渴望大家以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作