文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

前端开发中怎么处理AJAX请求的重复使用

2024-04-02 19:55

关注

这篇文章给大家分享的是有关前端开发中怎么处理AJAX请求的重复使用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

在开发前端时,我们经常使用AJAX来初始化数据并动态渲染在页面上,但是在遇到一连串的相同数据都要进行请求时,就有可能对同一个API  发出并发请求,然而,因为这些请求是同时发出,因此响应也非常可能是相同的,这样讲可能不够清楚,直接写一个简易的范例来解释这个情况。

实际范例

首先我们先撰写一个API:

https://localhost:3000/api/v1/users/:uuid

这个API的回传值如下:

{     "name":"Username{uuid}",     "uuid":"{uuid}" }

随后开一个Vue的demo,并且先通过Axios写一个请求的函数:

// fetch-user.js  const axios = require('axios');  module.exports = (uuid) => {     let uri = `http://localhost:3000/users/${uuid}`;     return new Promise(resolve => {         axios.get(uri).then(resolve);     }) };

然后我们在Vue例子中新增一个User Component(User.vue)来负责渲染并请求接口:

<template>     <div v-if="init">         <ul>             <li>{{user.name}}</li>             <li>{{user.uuid}}</li>         </ul>     </div> </template>  <script>     const fetchUser = require('../lib/fetch-user');     export default {         name: 'User',         data: function() {             return {                 init: false,                 user: null             }         },         props: {             uuid: String         },         async mounted() {             const response = await fetchUser(this.uuid);             this.init = true;             this.user = response.data;         }     } </script>

最后将用户组件放入App.vue中:

<template>     <div id="app">         <user uuid="user-uuid"></user>         <user uuid="user-uuid"></user>         <user uuid="user-uuid"></user>         <user uuid="user-uuid"></user>         <user uuid="user-uuid"></user>         <user uuid="user-uuid"></user>         <user uuid="user-uuid"></user>         <user uuid="user-uuid"></user>         <user uuid="user-uuid"></user>         <user uuid="user-uuid"></user>         <user uuid="user-uuid"></user>         <user uuid="user-uuid"></user>         <user uuid="user-uuid"></user>         <user uuid="user-uuid"></user>         <user uuid="user-uuid"></user>     </div> </template>  <script> import User from './components/User';  export default {     name: 'App',     components: {         User     } } </script>

接着我们看一下显示结果:

前端开发中怎么处理AJAX请求的重复使用

这样就正确显示了,然而这里有一个问题非常值得注意:

前端开发中怎么处理AJAX请求的重复使用

我们打开开发者模式就会发现,每个组件向该API发出了请求,因此就产生了10次的并发请求,但是在这种情况下,实际上我们仅需要让一个请求出去,另外9个元件等待这个请求的响应然后重新使用即可。

改进的方法

接下来将讲解要如何实现关于在同一个组件之间唯一指定API请求一次并分配请求,我们会用到这个元件EventTarget,这个元件有点类似Node.js中的EventEmitter,主要就是用于接收事件。

随后我们改写fetchUser()函数:

const axios = require('axios');   class FetchCompleteEvent extends Event {     constructor(type, data) {         super(type);         this.data = data;     } }  // 用于请求成功时使用的事件监听器 const eventEmitter = new EventTarget();  // 用于请求失敗时使用的事件监听器 const errorEmitter = new EventTarget();    const requestingList = new Map();  module.exports = (uuid) => {      let uri = `http://localhost:3000/users/${uuid}`;      return new Promise((resolve, reject) => {          // 如果没有记录,或者尚未处于请求状态         if (!requestingList.has(uri) || !requestingList.get(uri)) {              // 进入之后立即将请求状态设为 true             requestingList.set(uri, true);              // 请求 URI             axios.get(uri).then(response => {                  // 完成请求之后将请求状态设为 false                 requestingList.set(uri, false);                  // 发出一个事件通知來告诉 callback 请求完成了                 eventEmitter.dispatchEvent(new FetchCompleteEvent(uri, response));                 resolve(response);              }).catch((e) => {                  // 请求失败也算是请求完成,将请求状态设为 false                 requestingList.set(uri, false);                  // 发出一个事件通知來告诉 callback 请求失败了                 errorEmitter.dispatchEvent(new FetchCompleteEvent(uri, e));                 reject(e);              })         }          // 当目前指定的 URL 处于请求状态,则不做任何事情         else {              // 向成功的事件监听器注册,当完成之后 resolve()             eventEmitter.addEventListener(uri, (event) => {                 resolve(event.data);             });              // 失败之后 reject()             errorEmitter.addEventListener(uri, (event) => {                 reject(event.data);             })         }     }); };

接着我们重新运行前端应用程序并查看结果:

前端开发中怎么处理AJAX请求的重复使用

结果与一开始一模一样,而是当时我们打开开发者模式就会发现:

前端开发中怎么处理AJAX请求的重复使用

请求已经被减少到剩下一个了,这是因为所有的元件都重复使用了一个同一个响应。通过这种方法将可以大大减少服务器的负载以及前端的运行时间。

感谢各位的阅读!关于“前端开发中怎么处理AJAX请求的重复使用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯