Promise 理解

作者: 小鱼儿喜欢花无缺 | 来源:发表于2018-01-30 10:11 被阅读13次

    Rn开发中较难理解且应用频繁的地方

    1 含义

    首先是一个对象 , 类似于回掉函数。

    所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。

    (1)对象的状态不受外界影响

    (2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。 Pending->fulfilled(已成共) pending->rejected (已失败)。 只要这两种情况发生,状态就凝固了,会一直保持这个结果。这是就会被称为resolved 如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

    有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。

    Promise也有一些缺点。首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。

    (3),当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。如果某些事件不断地反复发生,一般来说,使用 Stream 模式是比部署Promise更好的选择。

    2 基本用法

    ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。

    下面代码创造了一个Promise实例

    var promise= new promise(function(resolve,reject)){

    if(异步操作成功)

    resovel(value)

    }else{

    reject(erro)

    }

    resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

    Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。

    promise.then(function(value)){

    //success

    },function(error){

    /.erro

    }

    then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

    3 Promise.prototype.then()

    Promise 实例具有then方法,也就是说,then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过,then方法的第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数。

    then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。

    4Promise.prototype.catch()

    Promise.prototype.catch方法是.then(null, rejection)的别名,用于指定发生错误时的回调函数。

    reject方法的作用,等同于抛出错误。

    Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获。

    上面代码中,一共有三个Promise对象:一个由getJSON产生,两个由then产生。它们之中任何一个抛出的错误,都会被最后一个catch捕获。

    一般来说,不要在then方法里面定义Reject状态的回调函数(即then的第二个参数),总是使用catch方法。

    5 Promise.all()

    Promise.all方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。

    p的状态由p1、p2、p3决定,分成两种情况。

    (1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。

    (2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

    Promise.race()

    Promise.race方法同样是将多个Promise实例,包装成一个新的Promise实例

    上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数

    Promise.race方法的参数与Promise.all方法一样,如果不是 Promise 实例,就会先调用下面讲到的Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。

    7 Promise.resolve()

    有时需要将现有对象转为Promise对象,Promise.resolve方法就起到这个作用。

    应用

    const preloadImage = function (path) {

    return newPromise(function (resolve, reject) {

    var image = newImage();

    image.onload  = resolve;
    
    image.onerror = reject;
    
    image.src = path;
    

    });

    };

    var p = new Promise(function(resolve, reject){ resolve(1); }); p.then(function(value){ //第一个then console.log(value); return value*2; }).then(function(value){ //第二个then console.log(value); }).then(function(value){ //第三个then console.log(value); return Promise.resolve('resolve'); }).then(function(value){ //第四个then console.log(value); return Promise.reject('reject'); }).then(function(value){ //第五个then console.log('resolve: '+ value); }, function(err){ console.log('reject: ' + err); })

    控制台输出:

    1

    2

    undefined

    "resolve"

    "reject: reject"

    相关文章

      网友评论

        本文标题:Promise 理解

        本文链接:https://www.haomeiwen.com/subject/kcvqzxtx.html