全国咨询/投诉热线:400-618-9090

首页技术文章正文

Promise的进阶版终极方案

更新时间:2018-11-16 来源:黑马程序员技术社区 浏览量:

现在大家所用的浏览器可谓除了常见的还有不常见的,总体来说是很多,但是
随着现代浏览器的不断发展,相信大家渐渐对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://www.qq.com','http://www.qq.com','http://www.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://www.qq.com','http://www.qq.com','http://www.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循环解决串行异步问题,没有回调没有嵌套看起来瞬间舒服多了~

作者:黑马程序员大数据培训学院
首发:http://web.itheima.com/

javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

http://www.itcast.cn/subject/uizly/index.shtml?seozxuids

14天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

8天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

0天免费试学

基础班入门课程限时免费

申请试学名额

12天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

10天免费试学

基础班入门课程限时免费

申请试学名额
在线咨询 我要报名