前端：如何处理AJAX请求的重复使用-ajax请求跨域前端解决

[[378036]]

在开发前端时，我们经常使用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>

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

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

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

改进的方法

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

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

const axios = require('axios'); 
 
/** 
 * 这个 class 是用于存储 Response Data 的 Event 衍生类 
 */ 
class FetchCompleteEvent extends Event { 
    constructor(type, data) { 
        super(type); 
        this.data = data; 
    } 
} 
 
// 用于请求成功时使用的事件监听器 
const eventEmitter = new EventTarget(); 
 
// 用于请求失敗时使用的事件监听器 
const errorEmitter = new EventTarget(); 
 
/** 
 * 用于存储 URI 以及是否当前正在请求的状态，如: 
 * http://localhost:8000/users/foo => true 代表已经发出请求，正在等待 Response 
 * http://localhost:8000/users/bar => false 代表当前没有请求在路上 
 */ 
 
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); 
            }) 
        } 
    }); 
};