Promise 是异步编程的一种解决方案，比传统的解决方案回调函数和事件相比，更合理和更强大，可以有效避免回调地狱。
我们会经常碰见如下情况,例子: (如果要执行函数2,那么必须先执行函数1)
普通实现方式: (如下嵌套层级多话，将形成回调地狱，极难维护)
setTimeout(() => {
console.log('1');
setTimeout(() => {
console.log('2');
setTimeout(() => {
console.log('3');
}, 1000);
}, 1000);
}, 1000);
promise实现: 这个效果，虽然代码量不会减少，甚至更多，但是却大大增强了其可读性和可维护性
function getStr1() {
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve('1');
}, 1000);
});
}
function getStr2() {
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve('2');
}, 1000);
});
}
function getStr3() {
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve('3');
}, 1000);
});
}
getStr1().then((data) => {
console.log(data);
return getStr2();
}).then((data) => {
console.log(data);
return getStr3();
}).then((data) => {
console.log(data);
})
ES6 Promise基本用法
ES6规定，Promise对象是一个构造函数，用来生成Promise实例。 下面代码创造了一个Promise实例。
let promise = new Promise((resolve, reject) => {
// ... some code
if (/*异步成功*/){
resove(value);
} else{
reject(error);。
}
})
Promise构造函数接受两个函数作为参数, 两个参数函数分别是resolve和reject, resolve函数的作用是将Promise对象的状态从“未完成”变为“成功”（即从Pending变为Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；相反, reject函数的作用是将Promise对象的状态从“未完成”变为“失败”（即从Pending变为Rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。 Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。
// onFullfilled(成功回调)和onRejected(失败回调)是回调函数:
promise.then(onFullfilled,onRejected) //等同如下
promise.then(function(value) {
// success
}, function(error) {
// failure
});
Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的：
function runAsync1(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务1执行完成');
resolve('随便什么数据1');
}, 1000);
});
return p;
}
function runAsync2(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务2执行完成');
resolve('随便什么数据2');
}, 2000);
});
return p;
}
function runAsync3(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务3执行完成');
resolve('随便什么数据3');
}, 2000);
});
return p;
}
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return runAsync3();
})
.then(function(data){
console.log(data);
});
// 输出结果为:
// 异步任务1执行完成
// 随便什么数据1
// 异步任务2执行完成
// 随便什么数据2
// 异步任务3执行完成
// 随便什么数据3
runAsync1().then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return '直接返回数据'; //这里直接返回数据
})
.then(function(data){
console.log(data);
});
// 输出结果为:
// 异步任务1执行完成
// 随便什么数据1
// 异步任务2执行完成
// 随便什么数据2
// 直接返回数据
通过上面两种链式调用后,你应该对“Promise是什么玩意”有了最基本的了解。接着来看看ES6的Promise其他东西,上面两个链式调用可以看到,then传参只有一个,也就是只有resolve成功回调,那reject呢?其实不难想到reject就是失败回调,reject的作用就是把Promise的状态置为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。看下面的代码。
function getNumber(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
var num = Math.ceil(Math.random()*10); //生成1-10的随机数
if(num<=5){
resolve(num);
}
else{
reject('数字太大了');
}
}, 2000);
});
return p;
}
//promise.then(onFullfilled,onRejected) ===> promise.then(成功回调 ,失败回调)
getNumber().then(
function(data){
console.log('resolved');
console.log(data);
},
function(reason, data){
console.log('rejected');
console.log(reason);
}
);
// 多调用几次 你会得到如下两种结果:
// resolved
// 2
// rejected
// 数字太大了
同样Promise还有catch , all , race 等方法
1. catch的用法:(其实它和then的第二个参数一样，用来指定reject的回调,)
getNumber()
.then(function(data){
console.log('resolved');
console.log(data);
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
});
虽然catch和then的第二个参数效果一样,不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。如下在, resolve的回调中，我们console.log(somedata);而somedata这个变量是没有被定义的。如果我们不用Promise，代码运行到这里就直接在控制台报错了，不往下运行了。但是在这里，会得到这样的结果：
getNumber().then(function(data){
console.log('resolved');
console.log(data);
console.log(somedata); //此处的somedata未定义
}).catch(function(reason){
console.log('rejected');
console.log(reason);
});
//输出结果为:
// resolved
// 4
// rejected
// ReferenceError: somedata is not defined
也就是说进到catch方法里面去了，而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了，这与我们的try/catch语句有相同的功能。
2. all的用法
Promise.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
console.log(results);
});
// 输入结果:
// 异步任务1执行完成
// 异步任务2执行完成
// 异步任务3执行完成
// ["随便什么数据1","随便什么数据2","随便什么数据3"]
有了all，你就可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据，是不是很酷？有一个场景是很适合用这个的，一些游戏类的素材比较多的应用，打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后，我们再进行页面的初始化。
3. race的用法
all方法的效果实际上是「谁跑的慢，以谁为准执行回调」，那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，这就是race方法，这个词本来就是赛跑的意思。race的用法与all一样，我们把上面runAsync1的延时改为1秒来看一下：
Promise.race([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
console.log(results);
});
// 这三个异步操作同样是并行执行的。结果你应该可以猜到，1秒后runAsync1已经执行完了，此时then里面的就执行了。结果是这样的：
// 异步任务1执行完成
// 随便什么数据1
// 异步任务2执行完成
// 异步任务3执行完成
这个race有什么用呢？使用场景还是很多的，比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作，代码如下：
//请求某个图片资源
function requestImg(){
var p = new Promise(function(resolve, reject){
var img = new Image();
img.onload = function(){
resolve(img);
}
img.src = 'xxxxxx';
});
return p;
}
//延时函数，用于给请求计时
function timeout(){
var p = new Promise(function(resolve, reject){
setTimeout(function(){
reject('图片请求超时');
}, 5000);
});
return p;
}
Promise
.race([requestImg(), timeout()])
.then(function(results){
console.log(results);
})
.catch(function(reason){
console.log(reason);
});
//requestImg函数会异步请求一张图片，我把地址写为"xxxxxx"，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。运行结果如下：
// GET file:///F:wamp/www/test/pronise/xxxxxx net::ERR_FILE_NOT_FOUND 图片请求超时.
promise的核心特性
- 一个 Promise 有 3 种状态：
pending: 初始状态，既不是成功，也不是失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。
pending 状态的 Promise 可能会变为fulfilled 状态，也可能变为 rejected 状态 - Promise 对象的状态，只有内部能够改变（而且只能改变一次），不受外界影响。
- 对象的状态一旦改变，就不会再变，任何时候都可以得到这个结果。 Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。一旦状态发生改变，状态就凝固了，会一直保持这个结果。
参考文章:
https://juejin.cn/post/6844903488695042062
https://juejin.cn/post/6844903509934997511
网友评论