前端：如何处理AJAX请求的重复使用

在开发前端的时候，我们经常会使用AJAX来初始化数据并动态渲染到页面上，但是当遇到对同一个数据的一系列请求时,有可能API发出并发请求。但是，因为这些请求是同时发出的，所以响应很可能是一样的。这可能不够清楚。让我写一个简单的例子来解释这种情况。实际例子首先我们写一个API：https://localhost:3000/api/v1/users/:uuid这个API的返回值如下：{"name":"Username{uuid}","uuid":"{uuid}"}然后打开一个Vuedemo，先通过axios写一个请求函数：//fetch-user.jsconstaxios=require('axios');module.exports=(uuid)=>{leturi=`http//localhost:3000/users/${uuid}`;returnnewPromise(resolve=>{axios.get(uri).then(resolve);})};然后我们在Vue实例中添加一个User组件（User.vue）负责渲染和请求接口：最后，将用户组件放入App.vue中：然后我们看一下显示结果：显示是正确的，但是有一个问题值得注意：打开开发者模式我们会发现，每个组件向API发出一个请求，所以有10个并发请求，但是在这种情况下，我们实际上只需要让一个请求出去，其他9个组件等待这个请求可以通过重用它来改进响应。接下来，我们将介绍如何实现唯一指定一次API请求并在相同组件之间分配请求。我们会用到这个组件EventTarget，它有点类似于Node.js的EventEmitter，主要用来接收事件。然后我们重写fetchUser()函数：constaxios=require('axios');/***这个类是一个Event派生类，用来存储ResponseData*/classFetchCompleteEventtextendsEvent{constructor(type,data){super(type);this.data=data;}}//请求成功时使用的事件监听器consteventEmitter=newEventTarget();//请求失败时使用的事件监听器consterrorEmitter=newEventTarget();/***用于存储URI和是否当前为请求状态，如：*http://localhost:8000/users/foo=>true表示请求已发送，正在等待Response*http://localhost:8000/users/bar=>false表示当前Norequestenroute*/constrequestingList=newMap();module.exports=(uuid)=>{leturi=`http://localhost:3000/users/${uuid}`;returnnewPromise((resolve,reject)=>{//如果没有记录，或者还没有进入请求状态if(!requestingList.has(uri)||!requestingList.get(uri)){//设置requestingstatetotrueafterenteringrequestingList.set(uri,true);//请求URIaxios.get(uri).then(response=>{//完成请求后，设置请求状态为falserequestingList.set(uri,false);//发送事件通知，告诉回调请求完成eventEmitter.dispatchEvent(newFetchCompleteEvent(uri,response));resolve(response);}).catch((e)=>{//请求失败也视为请求完成，设置请求状态为falserequestingList.set(uri,false);//发送事件通知告诉回调请求失败errorEmitter.dispatchEvent(newFetchCompleteEvent(uri,e));reject(e);})}//当当前指定的URL处于请求状态时，不做任何其他事情{//注册成功的事件监听器，当完成时resolve()eventEmitter.addEventListener(uri,(event)=>{resolve(event.data);});//失败后reject()errorEmitter.addEventListener(uri,(event)=>{reject(event.data);})}});};然后我们重新运行前端应用，查看结果：结果和开始的一模一样，但是当我们打开开发者模式时，会发现：request已经缩减为一个了，因为所有的组件都复用了相同的回复。这种方法将大大减少服务器负载和前端运行时间。总结不是每一种情况都可以使用该方法请求资源，例如：每次请求资源时，都会发送不同的API，所以不能使用该方法进行API调用，但是像上面例子中的用户配置文件，电商网站的产品信息或者文章等，类似API可以保证在很短的时间内资源是一样的，都可以这样操作。延伸阅读https://dev.to/floatflower/ajax-414j参考1.https://developer.mozilla.org/zh-TW/docs/Web/API/EventTarget