Promise 是抽象的异步处理对象

构造方法:

let promies = new Promise((resolve, reject) => {
 resolve(); //异步处理 
});

Promise 有三个状态:

  1. Fulfilled: has-resolved, 表示成功解决,这时会调用 onFulfilled.
  2. Rejected: has-rejected, 表示解决失败,此时会调用 onRejected.
  3. Pending: unresolve, 表示待解决,既不是resolve也不是reject的状态。也就是promise对象刚被创建后的初始化状态.

上面我们提到 Promise 构造函数接受一个函数作为参数,该函数的两个参数分别是 resolve 和 reject.

resolve函数的作用是,将 Promise 对象的状态从 未处理 变成 处理成功 (unresolved => resolved), 在异步操作成功时调用,并将异步操作的结果作为参数传递出去。

reject函数的作用是,将 Promise 对象的状态从 未处理 变成 处理失败 (unresolved => rejected), 在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

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

举例说明:引用网络上的代码示例:

(1)下面通过样例作为演示,我们定义做饭、吃饭、洗碗(cook、eat、wash)这三个方法,它们是层层依赖的关系,下一步的的操作需要使用上一部操作的结果。(这里使用 setTimeout 模拟异步操作)

//做饭
function cook(){
    console.log('开始做饭。');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('做饭完毕!');
            resolve('鸡蛋炒饭');
        }, 1000);
    });
    return p;
}
 
//吃饭
function eat(data){
    console.log('开始吃饭:' + data);
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('吃饭完毕!');
            resolve('一块碗和一双筷子');
        }, 2000);
    });
    return p;
}
 
function wash(data){
    console.log('开始洗碗:' + data);
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('洗碗完毕!');
            resolve('干净的碗筷');
        }, 2000);
    });
    return p;
}

(2)使用 then 链式调用这三个方法:

cook()
.then(function(data){
    return eat(data);
})
.then(function(data){
    return wash(data);
})
.then(function(data){
    console.log(data);
});

当然上面代码还可以简化成如下:

cook()
.then(eat)
.then(wash)
.then(function(data){
    console.log(data);
});

(3)运行结果如下:

开始做饭

做饭完毕

开始吃饭:鸡蛋炒饭

吃饭完毕

开始洗完:一块碗一双筷子

洗完完毕

赶紧的碗筷

解释:上述构造方法中的两个参数resolve, reject即是改变promise的状态,resolve 方法把 Promise 的状态置为完成态(Resolved),这时 then 方法就能捕捉到变化,并执行“成功”情况的回调​,resolve, reject可抛出结果,作为then方法中函数的参数。then可接受两个参数,第一个处理Resolved状态的函数,第二个处理Rejected函数。如果只想处理成功,或者失败,对应参数可设置为null,只有一个参数则表示状态改变就执行,不区分状态结果。

另外

catch()方法,它可以和 then 的第二个参数一样,用来指定 reject 的回调,另一个作用是,当执行 resolve 的回调(也就是上面 then 中的第一个参数)时,如果抛出异常了(代码出错了),那么也不会报错卡死 js,而是会进到这个 catch 方法中。

all()方法,Promise 的 all 方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调, 会把所有异步操作的结果放进一个数组中传给 then。

race()方法,race 按字面解释,就是赛跑的意思。race 的用法与 all 一样,只不过 all 是等所有异步操作都执行完毕后才执行 then 回调。而 race 的话只要有一个异步操作执行完毕,就立刻执行 then 回调。

注意:其它没有执行完毕的异步操作仍然会继续执行,而不是停止。

 

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐