[TOC]
* * * * *
> 异步执行代码的一种解决方案
![](https://box.kancloud.cn/9b03684f98cc75bb874b69f830bd99bb_512x280.png)
### 1.Promise实例的几种状态:
~~~
1. pending: 初始状态,既不是成功,也不是失败状态。
2. fulfilled: 意味着操作成功完成。
3. rejected: 意味着操作失败。
~~~
* * * * *
### 2. 最常用的实现
~~~
var pro0=new Promise(function(resolve, reject) {
console.log('开始定义 pro0');
var pro1=new Promise(function(resolve, reject) {
console.log('开始定义 pro1');
resolve(1);
});
setTimeout(function() {
console.log('setTimeout回调函数执行');
resolve(0);
}, 2000);
//resolve(2);
/*
假如这里有个 resolve(2),那么 pro0 的状态就会被改变,
且改变之后不会再变,那么 setTimeout 里的 resolve 就不再起作用了
*/
pro1.then(function(value) {
console.log('pro1 fulfilled',value);
});
});
pro0.then(function(value) {
console.log('pro0 fulfilled',value);
});
pro0.catch(function(e) {
console.log('pro0 rejected',e);
});
console.log('代码定义end');
~~~
a. 正常执行:
![](https://box.kancloud.cn/d1607487474ced2026a343807cb86dff_256x215.png)
b. 提前变状态:
![](https://box.kancloud.cn/460d19a1cf9df782574c8fcf5aec6959_253x211.png)
* * * * *
### 3. 链式调用
~~~
Promise.prototype.then 和 Promise.prototype.catch 方法
返回 Promise 对象, 所以它们可以被链式调用。
~~~
![](https://box.kancloud.cn/d15312e3e5d609c80b2de1cca2826f49_801x297.png)
~~~
这里是模拟了链式调用,用同步代码,真实情况中应该是异步代码
job1.then(job2).then(job3).catch(handleError);
其中,job1、job2和job3都是Promise对象。
function job0(input) {
return new Promise(function(resolve, reject) {
let result=input+1;
console.log('值+1:',result);
resolve(result);
})
}
function job1(input) {
return new Promise(function(resolve, reject) {
let result=input*2;
console.log('值*2:',result);
resolve(result);
})
}
function job2(input) {
return new Promise(function(resolve, reject) {
let result=input*input;
console.log('值的平方:',result);
resolve(result);
})
}
function done(input) {
console.log('原始值:',input);
job0(input)
.then(job1)
.then(job2);
}
~~~
执行结果为:
![](https://box.kancloud.cn/c4bd8c4286a676f1b7803e153ef5c810_169x153.png)