ES6 Promise 详解

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、概念

Promise，从语法上来讲，它是一个对象，是一个构造函数，可以获取 异步操作 的信息。

简单来讲，就是用同步的方式写异步代码，用来解决回调问题。

二、特点

Promise 对象有两个特点：

1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：

（1）、pending：初始值

（2）、fulfilled： 操作成功

（3）、rejected： 操作失败

只有异步操作的结果可以决定当前是哪一个状态，任何其他状态都无法改变这个状态。

2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。

Promise对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected 。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。

注：Promise 一旦新建就会「立即执行」，无法取消（new Promise() 里的函数会自动运行）。

三、Promise 方法

Promise 除了拥有自身的 all、race、resolve、reject 等方法外，在原型上还拥有 then、catch 方法。

看下列代码：

promiseBegin();

当执行 promiseBegin 函数时，会得到一个 Promise 对象，在 Promise 的构造函数中，我们执行了一个setTimeout异步操作，2秒后，输出“代码执行完成”，并且调用resolve方法。

then() 方法

then() 方法有两个参数，一个是成功 resolve 调用的方法，一个是失败 reject 调用的方法。

promiseBegin().then(function(data){
console.log(data);
//后面可以用传过来的数据做些其他操作
//......
},function(err) {
console.log(err);
});

catch() 方法

catch() 方法用于指定发生错误时的回调函数。

promiseBegin().then(function(data){
console.log(data);
//后面可以用传过来的数据做些其他操作
//......
}).catch(function(err){
// 处理失败的操作
console.log(err)
});

在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。

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

链式调用

我们们可以在 then 方法中继续写 Promise 对象并返回，然后继续调用 then 来进行回调操作。

//买笔
function buy(){
console.log("开始买笔");
var p = new Promise(function(resolve,reject){
setTimeout(function(){
console.log("买了笔芯");
resolve("数学作业");
},1000);
});
return p;
}
//写作业
function work(data){
console.log("开始写作业："+data);
var p = new Promise(function(resolve,reject){
setTimeout(function(){
console.log("写完作业");
resolve("作业本");
},1000);
});
return p;
} function out(data){
console.log("开始上交："+data);
var p = new Promise(function(resolve,reject){
setTimeout(function(){
console.log("上交完毕");
resolve("得分：A");
},1000);
});
return p;
}
/* 不建议使用这种方式
buy().then(function(data){
return work(data);
}).then(function(data){
return out(data);
}).then(function(data){
console.log(data);
});*/ //推荐这种简化的写法
buy().then(work).then(out).then(function(data){
console.log(data);
});

all() 方法

Promise的 all() 方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。

//买作业本
function cutUp(){
console.log('挑作业本');
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('挑好购买作业本');
resolve('新的作业本');
}, 1000);
});
return p;
} //买笔
function boil(){
console.log('挑笔芯');
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('挑好购买笔芯');
resolve('新的笔芯');
}, 1000);
});
return p;
} Promise.all([cutUp(),boil()]).then(function(results){
console.log("写作业的工具都买好了");
console.log(results); // ["新的作业本", "新的笔芯"]
});