如何优雅地写JS串行异步逻辑（js异步编程的四种方法）

随着现代浏览器的不断发展，相信大家渐渐对ES6中的Promise已经有很多的使用了，其中对Promise.all估计也用的很多。Promise.all就是并行执行多个任务，然后在所有任务成功后触发then里面的内容，或者任意一个任务失败后触发catch里面的内容。

虽然Promise.all非常好用，但它也不是适合所有的场景，最常见的就是有些场景是需要串行的，一个任务列表要按顺序依次循环执行，任意一个失败就不触发下面的任务。那要实现这样的功能能怎么写呢？

最简单的就是一个个写

var a = ()=>{return new Promise((resolve, reject) => {

setTimeout(resolve, 1000);

});}

var b = ()=>{return new Promise((resolve, reject) => {

setTimeout(resolve, 1000);

});}

var c = ()=>{return new Promise((resolve, reject) => {

setTimeout(resolve, 1000);

});}

a().then(()=>{

return b()

}).then(()=>{

return c()

}).then(()=>{

console.log('after 3 sec')

})

这样写。。。真的好挫，更重要的是，有时候需要批量处理一个任务，都是调用同一个函数处理不定长度的数据，这样写肯定就不行了，比如要串行请求一串url。首先想到的是一个比较绕的方法，搞个Promise链出来，把下一个任务作为参数传到前一个的then中，如此循环。这种同一个函数不断循环然后把前一个处理完的值又传到参数里面，刚好和Array.reduce的思想是一致的，所以可以这么写：

var urlArr = ['http://qq.com','http://qq.com','http://qq.com'];

function makaPromiseList(dataArr,handler) {

return dataArr.reduce((promise, obj) => {

return promise.then((ret) => {

return handler(obj);

})

}, Promise.resolve())

}

var result = [];

function makeRequest(url){

return new Promise((resolve,reject)=>{

$.get(url).success((ret)=>{

result.push(ret)

resolve(result)

}).fail(()=>{

reject()

})

})

}

makaPromiseList(urlArr,makeRequest).then((result)=>{

console.log(result)

});

老师不给力啊，理解起来就很绕，还要在闭包外面定义result存数据，用上reduce也觉得有点奇技淫巧，不太美观啊，能不能写得更好看点啊。 

可以！说起异步方案，Promise是很强，但它还不是最强的，还有Promise的进阶版 —— async/await！号称JS异步的终极解决方案，真不是盖的，下面就来看看async/await的方案

var urlArr = ['http://qq.com','http://qq.com','http://qq.com'];

function makeRequest(url){

return new Promise((resolve,reject)=>{

$.get(url).success((ret)=>{

resolve(ret)

}).fail(()=>{

reject()

})

})

}

async function makaPromiseList(dataArr,handler){

var result = [];

for(let item of dataArr){

var ret = await handler(item);

result.push(ret);

}

return result;

}

makaPromiseList(urlArr,makeRequest).then((ret)=>{

console.log(ret)

});

一个for循环解决串行异步问题，没有回调没有嵌套看起来瞬间舒服多了~

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。