在前端开发中，经常需要发送多个请求来获取数据。如果每个请求都是单独发送并等待响应，那么会导致页面加载速度变慢，用户体验变差。此时，批量请求库就可以解决这个问题。ES7 中的 await 和 Promise.all 结合起来，可以实现一个简单的批量请求库。
await 和 Promise.all
在 ES7 中，可以使用 await 关键字来等待 Promise 对象的结果，这样可以避免回调地狱的问题。例如：
async function fetchData() { const data = await fetch('https://api.example.com/data'); console.log(data); }
上面的代码中，fetchData 函数使用 async 关键字声明为异步函数，可以在函数内部使用 await 关键字等待 fetch 函数返回的 Promise 对象的结果。当 Promise 对象的状态变为 resolved 时，await 表达式的值就是 Promise 对象 resolve 函数的返回值。
Promise.all 方法可以接收一个 Promise 对象数组，返回一个新的 Promise 对象。这个新的 Promise 对象的状态会在所有 Promise 对象的状态都变为 resolved 时变为 resolved。Promise.all 方法的返回值是一个数组，数组的每个元素是对应 Promise 对象 resolve 函数的返回值。例如：
Promise.all([ fetch('https://api.example.com/data1'), fetch('https://api.example.com/data2'), ]).then(([data1, data2]) => { console.log(data1, data2); });
上面的代码中，Promise.all 方法接收一个包含两个 Promise 对象的数组，当两个 Promise 对象的状态都变为 resolved 时，then 方法的回调函数会接收一个数组作为参数，数组的第一个元素是第一个 Promise 对象 resolve 函数的返回值，第二个元素是第二个 Promise 对象 resolve 函数的返回值。
批量请求库的实现
批量请求库的实现很简单，只需要将所有请求的 Promise 对象放到一个数组中，然后使用 Promise.all 方法等待所有 Promise 对象都变为 resolved，最后返回所有 Promise 对象 resolve 函数的返回值。例如：
async function batchFetchData(urls) { const promises = urls.map(url => fetch(url)); const responses = await Promise.all(promises); const data = await Promise.all(responses.map(response => response.json())); return data; }
上面的代码中，batchFetchData 函数接收一个包含多个 URL 的数组，使用 map 方法将每个 URL 转换为 fetch 函数返回的 Promise 对象。然后使用 Promise.all 方法等待所有 Promise 对象都变为 resolved，再使用 map 方法将每个 Response 对象转换为 JSON 数据。最后返回所有 JSON 数据的数组。
示例代码
下面是一个使用批量请求库的示例代码：
-- -------------------- ---- ------- ----- -------- ----------- - ----- ---- - - -------------------------------- -------------------------------- -------------------------------- -- ----- ---- - ----- --------------------- ------------------ -展开代码
上面的代码中，fetchData 函数使用 batchFetchData 函数批量请求三个 URL 的数据，并将所有数据打印到控制台。如果每个 URL 的数据请求时间都为 1 秒钟，那么使用批量请求库只需要 1 秒钟就可以获取所有数据，而单独发送每个请求需要 3 秒钟才能获取所有数据。
学习和指导意义
使用 await 和 Promise.all 结合起来实现批量请求库，可以提高页面的加载速度，提升用户体验。同时，这个方法也可以应用于其他需要批量处理 Promise 对象的场景。学习这个方法可以提高 JavaScript 的编程能力，同时也可以提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cd3a5ee46428fe9e6a7112
