promise-有解無憂

回呼函式內部的 this 都是指向 window；回呼函式定義：當前處理邏輯完成之后,執行封裝在callback函式中的后處續理邏輯;

new Promise() 引數接收一個同步自執行匿名函式，構建實體時，該引數就會自動執行

let promise = new Promise((resolve,reject) => {
    console.log(1);
    resolve("returnValue"); // resolve和reject函式傳入的實參就當前promise物件的[[PromiseResult]]的值
});
console.log(2); //控制臺輸出1->2

promise物件：
[[PromiseState]]: "pending"      // 當前promise的狀態，可選值：fulfilled(成功態)、rejected(失敗態)、pending(等待，初始值)
[[PromiseResult]]: "returnValue" // 當前promise的值

resolve() -> PromiseStatus從pending變為fulfilled；只接受一個引數
reject()  -> PromiseStatus從pending變為rejected；只接受一個引數

then 方法會回傳一個新的 promise(testPromise)：

let promise = new Promise((resolve, reject) => { resolve(1);});
let newPromise = promise.then(res => {
    return res*2; // 默認 return undefined; 回傳值做為當前then方法回傳的promise的[[PromiseResult]]屬性的值
})
// newPromise.[[PromiseResult]] = 2

then 拋錯

let promise = new Promise((resolve, reject) => {
    resolve(1);
});
// 如果then方法拋錯
let newPromise = promise.then(res => {
    throw new Error("引數必須是字串!");
})
newPromise 物件： [[PromiseState]]: "rejected"
                 [[PromiseResult]]: Error: 引數必須是字串!

如果沒有錯誤捕獲，則控制臺報錯如下：

如果存在錯誤捕獲，則控制臺不會報錯，輸出如下：

newPromise.catch(err => {
    console.log(err);
})

如果 then 方法的回呼函式回傳一個普通值(a)，則 returnPromise.[[PromiseResult]] = a

如果 then 方法的回呼函式回傳一個promise(b)，則 returnPromise= b

let promise = new Promise((resolve, reject) => {resolve(1);});
let newPromise = promise.then(res => {
    return new Promise((resolve, reject) => {
        resolve('a');
    });
})
newPromise物件如下：[[PromiseState]]: "fulfilled"
                   [[PromiseResult]]: a

Promise.reject('reject') 回傳一個新失敗態的 promise：{[[PromiseState]]: "rejected" , [[PromiseResult]]: "reject"} ; 如果 reject() 不接收引數,則回傳的 [[PromiseResult]]=undefined

Promise.all，promises 陣列中所有 promise 物件都達到 resolve 狀態，才執行 then 回呼，

var p1 = Promise.resolve(1);
var p2 = Promise.resolve(2);
var p3 = Promise.resolve(3);
const promise = Promise.all([p1, p2, p3]).then(function(results){
    return results;
});
console.log(promise); // promise = {[[PromiseState]]: "fulfilled" , [[PromiseResult]]: [1,2,3]}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/505527.html

標籤：JavaScript

上一篇：【面試題】JS實作陣列扁平化處理，妙不可言啊！

下一篇：前端面試題JavaScript篇——2022-09-07