es6 javascript对象Promise

Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

1.模拟同步加载,比如两个ajax请求,需求是ajax1执行完拿到数据后才能执行ajax2,这里我就用setTimeout来表示ajax。

一般的处理方式是

var ajax1=setTimeout(()=>{

    console.log( "ajax1回调了,发起ajax2请求 ");

    var ajax2=setTimeout(()=>{ 

            console.log( "ajax2回调了,发起ajax3请求" );

             var ajax3=setTimeout(()=>{

                         console.log( "ajax3的回调执行了" );

               },1000)

      },1000)

},1000)

用promise实现

new Promise(( resolve,reject )=>{

        setTimeout(()=>{

                console.log( "ajax1回调了,开始调用ajax2的请求函数 ");

                 resolve("哈哈哈哈我是ajax1请求回来的数据");

        })

})

.then((res)=>{

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

            console.log("ajax1传过来的参数="+res);

            setTimeout(()=>{

                    console.log( "ajax2回调了,开始调用ajax3的请求函数 ");

                     resolve("哈哈哈哈我是ajax2请求回来的数据");

            })

    })

})

.then((res)=>{

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

            console.log("ajax2传过来的参数="+res);

             setTimeout(()=>{

                    console.log( "ajax3回调了");

                    reject("ajax3回调拿到的参数为null,我要报异常");

                })

    })  

})

.catch((err)=>{

    console.log(err);

});

代码多的话两种方式的可读性就很明显了。

2.并行加载,可以让几个函数“并行”异步加载,一起回调。

Promise.all 接收一个 promise对象的数组作为参数,当这个数组里的所有promise对象全部变为resolve或reject状态的时候,它才会去调用 .then 方法。

var fun1=(res)=>{

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

            setTimeout(()=>{

                //这个请求用了1秒

                resolve(res);

            },1000)

    });

}

var fun2=(res)=>{

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

                setTimeout(()=>{

                    //这个请求用了3秒

                    resolve(res);

                },3000)

        });

}

var obj={ name:"promise"};

var obj1={ name:"all"}

Promise.all([fun1(obj),fun2(obj1)]).then((res)=>{

    //3秒后

    console.log(res);

    //[{"name":"promise"},{"name":"all"}]

    //返回的是包含所有函数返回值的数组

}).catch((err)=>{

    console.log(err);

})

Promise.all和Promise.race使用方式完全一样,区别在于all是数组中所有函数都执行了resolve方法才回调,race则是第一个执行了resolve方法就回调,这个就不上代码了,只是回调有区别。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,749评论 1 56
  • 特点 Promise能将回调分离出来,在异步操作执行之后,用链式方法执行回调,虽然es5用封装函数也能实现,但是如...
    一二三kkxx阅读 647评论 0 1
  • 在ES6当中添加了很多新的API其中很值得一提的当然少不了Promise,因为Promise的出现,很轻松的就给开...
    嘿_那个谁阅读 3,692评论 2 3
  • //本文内容起初摘抄于 阮一峰 作者的译文,用于记录和学习,建议观者移步于原文 概念: 所谓的Promise,...
    曾经过往阅读 1,268评论 0 7
  • # Ajax标签(空格分隔): 笔记整理---[TOC]### 从输入网址开始:- 在学习ajax之前,你应该先了...
    V8阅读 308评论 1 0