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 =https://www.cnblogs.com/Mkkk/archive/2021/02/10/> {
    console.log(value);
})

console.log(p1);

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


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

let p1 = p.then(value =https://www.cnblogs.com/Mkkk/archive/2021/02/10/> {
    throw("wrong")
})

console.log(p1)

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

*/


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

let p1 = p.then(value =https://www.cnblogs.com/Mkkk/archive/2021/02/10/> {
   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)
// 出錯了

標籤：其他

上一篇：JavaScript事件處理

下一篇：使用Markdown來豐富Discord對話效果