es6 async函数实例：按顺序完成异步操作

async函数实例：按顺序完成异步操作

实际开发中，经常遇到一组异步操作，需要按照顺序完成。比如，依次远程读取一组 URL，然后按照读取的顺序输出结果。

ES6 Promise 的写法如下。

function logInOrder(urls) {
// 远程读取所有URL
const textPromises = urls.map(url => {
return fetch(url).then(response => response.text());
});
// 按次序输出
textPromises.reduce((chain, textPromise) => {
return chain.then(() => textPromise)
.then(text => console.log(text));
}, Promise.resolve());
}

上面代码使用fetch方法，同时远程读取一组 URL。每个fetch操作都返回一个 Promise 对象，放入textPromises数组。然后，reduce方法依次处理每个 Promise 对象，然后使用then，将所有 Promise 对象连起来，因此就可以依次输出结果。

这种写法不太直观，可读性比较差。下面是 async函数实现。

async function logInOrder(urls) {
for (const url of urls) {
const response = await fetch(url);
console.log(await response.text());
}
}

上面代码确实大大简化，问题是所有远程操作都是继发。只有前一个 URL 返回结果，才会去读取下一个 URL，这样做效率很差，非常浪费时间。我们需要的是并发发出远程请求。

async function logInOrder(urls) {
// 并发读取远程URL
const textPromises = urls.map(async url => {
const response = await fetch(url);
return response.text();
});
// 按次序输出
for (const textPromise of textPromises) {
console.log(await textPromise);
}
}

上面代码中，虽然map方法的参数是async函数，但它是并发执行的，因为只有async函数内部是继发执行，外部不受影响。后面的for..of循环内部使用了await，因此实现了按顺序输出。

es6 async函数实例：按顺序完成异步操作相关推荐

ES6 async函数（超级详细、易懂）
下面是对 ES6 async函数的整理,希望可以帮助到有需要的小伙伴~ 文章目录 async函数是什么异步函数声明式异步函数表达式返回Promise对象 await表达式 await处理错误 a ...
es6 async函数的语法
async函数的语法 async函数的语法规则总体上比较简单,难点是错误处理机制. 返回 Promise 对象 async函数返回一个 Promise 对象. async函数内部return语句返回的 ...
es6 async函数的基本用法
async函数的基本用法 async函数返回一个 Promise 对象,可以使用then方法添加回调函数.当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句 ...
es6 async函数的实现原理
async函数的实现原理 async函数的实现原理,就是将 Generator函数和自动执行器,包装在一个函数里. async function fn(args) { // ... } // 等同于 ...
es6 async函数的异步迭代器
async函数的异步迭代器 <迭代器>一章说过,Iterator 接口是一种数据遍历的协议,只要调用迭代器对象的next方法,就会得到一个对象,表示当前遍历指针所在的那个位置的信息.nex ...
es6 async函数与其他异步处理方法的比较
async函数与其他异步处理方法的比较我们通过一个例子,来看 async函数与 Promise.Generator函数的比较. 假定某个 DOM 元素上面,部署了一系列的动画,前一个动画结束,才能开 ...
【ES6】异步操作和async函数
[ES6]异步操作和async函数一.基本概念二.回调函数三.Promise 四.async函数查看更多ES6教学文章: 参考文献引言:ES6新增的Generato.Promise.asyn ...
阮一峰老师的ES6入门：async 函数
async 函数 1. 含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 Gener ...
ES6学习笔记（十六）async函数
1.含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖,号称异步的终极解决方案. 前文有一个 Gen ...

es6 async函数实例：按顺序完成异步操作

async函数实例：按顺序完成异步操作

es6 async函数实例：按顺序完成异步操作相关推荐

最新文章

热门文章