Promise的小总结

什么是Promise?

promise就是es6统一为了解决异步回调而提出的新的特性，它的好处在于异步执行的流程中，把执行代码和处理结果的代码分离了。多个异步操作可以链式调用，避免了回调函数的层层嵌套。

Promise 怎么使用？

         //一段伪代码
        var p = new Promise(function(resolve,reject){
            // 一段异步操作的代码
            // resolve('success')  成功
            // reject('error')   失败
        });
        p.then(function(result){
            console.log(result);  //success
        },function(err){
            console.log(err); // error
        })
        //或者
        p.then(function(result){
            console.log(result);  //success
        }).catch(function(err){
            console.log(err)   //error
        })

Promise的小tips

1.Promise 本身是同步的，then是异步的：

console.log(1)  
var p = new Promise(function(resolve,reject){
    console.log(2);
    setTimeout(resolve,1000,3)
});
p.then(function(res){
    console.log(res);
})
console.log(4)
// 依次打印1 2 4 3(3是隔一秒之后打印）

2.promise 有三种状态 pending(未完成，初始状态)、fulfilled(完成，操作成功)、rejected(拒绝，操作失败)
promise状态只会从pending变成fulfilled 和从pending 变成rejected
而且状态一旦改变，就不会再变。

const promise = new Promise((resolve, reject) => {
    resolve('success1');
    reject('error');
    resolve('success2');
});
promise.then((res) => {
    console.log('then:', res);
}).catch((err) => {
    console.log('catch:', err);
})
//打印 then success1 
//状态已经被resolve,并且只能被resolve一次，所以后面的reject,resolve都不会起作用

3.promise带catch 链式操作

new Promise((resolve, reject) => {
    console.log('初始化');
    resolve();
})
.then(() => {
    throw new Error('有哪里不对了');
    console.log('执行「这个」”');
})
.catch(() => {
    console.log('执行「那个」');
})
.then(() => {
    console.log('执行「这个」，无论前面发生了什么');
});
//打印结果：
// 初始化
//  执行那个
// 执行「这个」，无论前面发生了什么
//-------------------------------------------分割线----------------------------------
//而如果catch写在最后
new Promise((resolve, reject) => {
    console.log('初始化');
    resolve();
})
.then(() => {
    throw new Error('有哪里不对了');
    console.log('执行「这个」”');
})
.then(() => {
    console.log('执行「这个」，无论前面发生了什么');
})
.catch(() => {
    console.log('执行「那个」');
})
//打印结果：
// 初始化
// 执行那个
如果只在最后catch错误，那么一遇到异常抛出，Promise 链就会停下来，直接调用链式中的 catch 处理程序来继续当前执行

4.Promise.resolve()和 Promise.reject() 是手动创建一个已经 resolve 或者 reject 的 Promise 快捷方法。
5.Promise.all() 用于将多个promise实例，包装成一个promise实例。接收一个数组参数，如果数组中所有的promise都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。

var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});
//打印结果  [3，42，'foo']

6.Promise.race() 接收一个数组参数，一旦参数中的某个promise resolve或者reject ，返回的promise就会resolve或者reject

var promise1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, 'one');
});

var promise2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then(function(value) {
  console.log(value);
});
//打印结果： two

7.一个优秀的写法：

[func1, func2, func3].reduce((p, f) => p.then(f), Promise.resolve())
.then(result3 => { /* use result3 */ });

8.一个面试题 update--2020-09-10

    setTimeout(function(){
        console.log(1);
    })

    new Promise(function(resolve,reject){
        console.log(2);
        resolve(3);
        reject('error');
        console.log(4);
    }).then(function(val){
        console.log(val);
    }).catch((err)=>{
        console.log(err);
    })

    console.log(5);
    // 2 4 5 3 1
    //考察点两点：
    //1) 无论是resolve还是reject，先触发一个之后就不会再触发另一个
    //2) resolve 后面代码还是会继续执行的，并且是同步执行的。

参考：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises
https://blog.csdn.net/weixin_34090562/article/details/88672431 （promise相关的面试题）
https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544