Promise精简总结

前言 : 个人总结，不是教程，如有错误，欢迎各位批评指正。

 

主要作用:

　　 解决回调地狱

 

简单使用

// 创建Promise
let p = new Promise((resolve, reject) => {
    let i = Math.random();
    if (i < 0.5) resolve("a");
    else reject("b");
});

// resolve传递的参数进入第一个回调函数，reject传递的进入第二个回调函数
p.then((arg) => console.log("resolve === ",arg), (arg) => console.log("reject === ",arg));
 
// 与上面代码等价
p.then((arg) => console.log("resolve === ",arg)).catch((arg) => console.log("reject === ",arg))

 

Promise属性

　　PromiseState:

　　　　1.padding : 未决定

　　　　2.resolved / fullfilled : 成功

　　　　3.rejected 失败

　　　　resolve/reject调用前状态为pending, 调用后分别对应状态 2 , 3　　

 　　　   promise中抛出错误会将promise状态改变为rejected

 

　　PromiseResult

　　　　保存着 resolve/reject调用时 传递的结果

 

工作流程

　　

 

 

 

 

 

方法

　　Promise.resolve(value) 

　　作用:用于快速创建Promise,如果传入的参数为非promise，则返回一个fullfilled类型的,值为value的promise。若传入值为promise，则返还的promise状态与值与传入的promise相同

　　

let p1 = Promise.resolve(123);
p1.then(console.log)

// 123

let p1 = Promise.resolve(new Promise((resolve,reject) => {
    resolve(456);
}));
p1.then(console.log);
// 456

let p1 = Promise.resolve(new Promise((resolve,reject) => {
    reject(789);
}));
p1.catch(console.log)

// 789

　　

　

Promise.reject(value) 

　　作用:用于快速创建Promise,如果传入的参数为非promise，则返回一个rejected类型的,值为value的promise。若传入值为promise，则返还类型为rejected，值为传入的promise的promise对象

 

　

let p1 = Promise.reject(new Promise((resolve,reject) => {
    resolve(123);
}));
p1.catch(console.log)

// Promise { 123 }

　　

　Promise.all(promises)   

　　作用:传入promises数组，若promises全为fullfilled类型，返回类型为fullfilled，值为promises结果组成的数组。若有一个失败，则返回类型为rejected，值为按数组传入顺序第一个失败的promise的值

 

let p1 = Promise.resolve("hello");
let p2 = Promise.resolve("a");
let p3 = Promise.resolve("b");

Promise.all([p1,p2,p3]).then(console.log);

// [ 'hello', 'a', 'b' ]

p1 = Promise.resolve("hello");
p2 = Promise.reject("a");
p3 = Promise.reject("b");

Promise.all([p1,p2,p3]).catch(console.log);

// a

 

Promise.race(promises)   

　　作用:传入promises数组，返还第一个改变状态的promise的状态与值

 

let p1 = new Promise((resolve, reject) => {
    resolve("ok");
})
let p2 = Promise.resolve("a");
let p3 = Promise.resolve("b");

Promise.race([p1, p2, p3]).then(console.log);
// ok

p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("ok");
    }, 1000);
})
p2 = Promise.resolve("a");
p3 = Promise.resolve("b");

Promise.race([p1, p2, p3]).then(console.log);
// a

 

then 方法:

let p = Promise.resolve("ok");

let p1 = p.then(value => {
    console.log(value);
})

console.log(p1);

/**
    Promise {<pending>}
    __proto__: Promise
    [[PromiseState]]: "fulfilled"
    [[PromiseResult]]: undefined
*/


let p = Promise.resolve("ok");

let p1 = p.then(value => {
    throw("wrong")
})

console.log(p1)

/**
    Promise {<rejected>: "wrong"}
    __proto__: Promise
    [[PromiseState]]: "rejected"
    [[PromiseResult]]: "wrong"

*/


let p = Promise.resolve("ok");

let p1 = p.then(value => {
   return "ok"
})

console.log(p1)

/**
    Promise {<pending>}
    __proto__: Promise
    [[PromiseState]]: "fulfilled"
    [[PromiseResult]]: "ok"
*/

// 返回promise 则p1即为返回的promise 代码略

注意：

　　1.利用then方法返回新的promise可以进行then的链式调用，链式调用中存在异常穿透，即只需在最后直接catch，即可捕获所有then中可能出现的异常

　　2.中断promise.then的链式调用，在其中一个then中返还一个pending状态的promise即可， new Promise(() => {}); 

 

async & await:

　　async: 修饰一个函数，根据返回值构建出一个Promise，规则同then

　　 await:只能在async修饰的函数中调用

　　　　1.右侧值为fullfilled的promise对象，获得其值

　　　　2.右侧值为rejected的promise对象，抛出错误

　　　　3.右侧为值，直接返回该值

注意:

　　1.promise中的方法在被创建时会被同步执行

new Promise((resolve, reject) => {
    console.log(1);
});

console.log(2);

// 输出: 1 2

 

        2.如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。

new Promise((resolve,reject) => {
    throw "出错了"
}).catch(console.log)
// 出错了