關(guān)于Promise

stdying 發(fā)布于2019-08-20 18:22 / 1076人閱讀

摘要：是一種異步編程的解決方案相比傳統(tǒng)回調(diào)函數(shù)更合理立即執(zhí)行性立即執(zhí)行返回成功后執(zhí)行控制臺輸出立即執(zhí)行后執(zhí)行返回成功對象表示未來發(fā)生的事件在創(chuàng)建時作為參數(shù)傳入的函數(shù)是會被立即執(zhí)行的只是其中執(zhí)行的代碼可以是異步代碼有些人會認為當對象調(diào)用方法時接受的

Promise是一種異步編程的解決方案,相比傳統(tǒng)回調(diào)函數(shù)更合理.

1.Promise立即執(zhí)行性

let p = new Promise((resolve, reject) => {
    console.log("立即執(zhí)行!");
    resolve("返回成功!")
});

console.log("promise后執(zhí)行!");

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

控制臺輸出:

"立即執(zhí)行!"
"promise后執(zhí)行!"
"返回成功!"

Promise對象表示未來發(fā)生的事件,在創(chuàng)建promise時,作為promise參數(shù)傳入的函數(shù)是會被立即執(zhí)行的,只是其中執(zhí)行的代碼可以是異步代碼.有些人會認為,當promise對象調(diào)用then方法時,promise接受的函數(shù)才會執(zhí)行,這是錯誤的.所以,代碼中立即執(zhí)行!先于promise后執(zhí)行!輸出.

2.Promise的三種狀態(tài).

let p1 = new Promise((reslove, reject) => {
    reslove(1);
});
let p2 = new Promise((reslove, reject) => {
    setTimeout(() => {
        reslove(2);
    }, 500);
});
let p3 = new Promise((reslove, reject) => {
    setTimeout(() => {
        reject(3);
    }, 500);
});

console.log(p1);
console.log(p2);
console.log(p3);
setTimeout(() => {
    console.log(p2);
}, 1000);
setTimeout(() => {
    console.log(p3);
}, 1000);

p1.then(value => {
    console.log(value);
});
p2.then(value => {
    console.log(value);
});
p3.catch(err => {
    console.log(err);
});

控制臺輸出:

Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 1}
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
1
2
3
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 2}
Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: 3}

Promise內(nèi)部實現(xiàn)是一個狀態(tài)機.Promise有三種狀態(tài): pending，resolved，rejected.當Promise剛創(chuàng)建完成時,處于pending狀態(tài);當Promise中的函數(shù)參數(shù)執(zhí)行了resolve后,Promise由pending狀態(tài)變成resloved狀態(tài);如果Promise的函數(shù)參數(shù)中執(zhí)行的是reject方法,那么Promise會有pending狀態(tài)變成rejected狀態(tài).

3.Promise狀態(tài)不可逆性.

let p1 = new Promise((reslove, reject) => {
    reslove("成功1!");
    reslove("成功2!");
});
let p2 = new Promise((reslove, reject) => {
    reslove("成功!");
    reject("失敗!");
});

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

控制臺輸出:

"成功1!"
"成功!"

Promise的狀態(tài)一旦變成resolved或rejected時,Promise的狀態(tài)和值就固定下來了,無論后續(xù)再怎么調(diào)用reslove或是reject方法,都不能改變它的狀態(tài)和值.所以,p1中reslove("成功2!")并不能將p1的值更改為成功2!,p2中reject("失敗!")也不能將p2的狀態(tài)由resolved改變?yōu)閞ejected.

4.鏈式調(diào)用.

let p = new Promise((resolve, reject) => {
    resolve(1);
});

p.then(value => {
    console.log(value);
    return value * 2;
}).then(value => {
    console.log(value);
}).then(value => {
    console.log(value);
    return Promise.resolve("resolve");
}).then(value => {
    console.log(value);
    return Promise.reject("reject");
}).then(value => {
    console.log(`resolve: ${value}`);
}, err => {
    console.log(`reject: ${err}`);
})

控制臺輸出:

1
2
undefined
"resolve"
"reject: reject"

Promise對象的then方法返回一個新的Promise對象,所以可以通過鏈式調(diào)用then方法.then方法接受兩個函數(shù)作為參數(shù),第一個參數(shù)是Promise執(zhí)行成功時的回調(diào),第二個參數(shù)是Promise執(zhí)行失敗時的回調(diào).兩個函數(shù)只會有一個被調(diào)用,函數(shù)返回值將用作創(chuàng)建then返回的Promise對象.這兩個參數(shù)的返回值可以是下面三種情況的一種:

①:return一個同步的值,或者undefined(當沒有返回一個有效值時,默認返回undefined),then方法將返回一個resloved狀態(tài)的Promise對象,Promise對象的值就是這個返回值.
②:return另一個Promise,then方法將根據(jù)這個Promise的狀態(tài)和值創(chuàng)建一個新的Promise對象返回.
③:throw一個同步異常,then方法將返回一個rejected狀態(tài)的Promise,值是該異常.

根據(jù)以上分析,代碼中的第一個then會返回一個值為2(1 * 2),狀態(tài)為resolved的Promise對象,于第二個then輸出的值為2.第二個then中沒有返回值,因此將返回默認的undefined,于是在第三個then中輸出的undefined.第三個then和第四個then中分別返回一個狀態(tài)是resloved的Promise和一個狀態(tài)是rejected的Promise,依次由第四個then中的成功回調(diào)函數(shù)和第五個then中的失敗回調(diào)函數(shù)處理.
5.Promise then()回調(diào)異步性.

let p = new Promise((resolve, reject) => {
    resolve("成功!");
});

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

console.log("誰先執(zhí)行?")

控制臺輸出:

"誰先執(zhí)行?"
"成功!"

Promise接受的函數(shù)參數(shù)是同步執(zhí)行的,但是then方法中的回調(diào)函數(shù)則是異步的,因此,成功!會在后面輸出.
6.Promise中的異常.

let p1 = new Promise((resolve, reject) => {
    foo.bar();
    resolve(1);
});

p1.then(value => {
    console.log(`p1 then value: ${value}`);
}, err => {
    console.log(`p1 then err: ${err}`);
}).then(value => {
    console.log(`p1 then then value: ${value}`);
}, err => {
    console.log(`p1 then then err: ${err}`);
});

let p2 = new Promise((resolve, reject) => {
    resolve(2);
});

p2.then(value => {
    console.log(`p2 then value: ${value}`);
    foo.bar();
}, err => {
    console.log(`p2 then err: ${err}`);
}).then(value => {
    console.log(`p2 then then value: ${value}`);
}, err => {
    console.log(`p2 then then err: ${err}`);
    return 1;
}).then(value => {
    console.log(`p2 then then then value: ${value}`);
}, err => {
    console.log(`p2 then then then err: ${err}`);
});

控制臺輸出:

p1 then err: ReferenceError: foo is not defined
p2 then value: 2
p1 then then value: undefined
p2 then then err: ReferenceError: foo is not defined
p2 then then then value: 1

Promise中的異常由then參數(shù)中的第二個回調(diào)函數(shù)(Promise執(zhí)行失敗的回調(diào))處理,異常信息將作為Promise的值.異常一旦得到處理,then返回后續(xù)的Promise對象將恢復(fù)正常,并會被Promise執(zhí)行成功的回調(diào)函數(shù)處理.另外,需要注意p1,p2多級then的回調(diào)函數(shù)是交替執(zhí)行的,這正是由Promise then回調(diào)的異步性決定的.

7.Promise.reslove().

let p1 = Promise.resolve(1);
let p2 = Promise.resolve(p1);
let p3 = new Promise((resolve, reject) => {
    resolve(1);
});
let p4 = new Promise((resolve, reject) => {
    resolve(p1);
});

console.log(p1 === p2);
console.log(p1 === p3);
console.log(p1 === p4);
console.log(p3 === p4);

p4.then(value => {
    console.log(`p4=${value}`)
});
p2.then(value => {
    console.log(`p2=${value}`)
});
p1.then(value => {
    console.log(`p1=${value}`)
});

控制臺輸出:

true
false
false
false
p2=1
p1=1
p4=1

Promise.resolve(...) 可以接受一個值或者是一個Promise對象作為參數(shù).當參數(shù)是普通值時,它返回一個resolved狀態(tài)的Promise對象,對象的值就是這個參數(shù);當參數(shù)是一個Promise對象時,它直接返回這個Promise參數(shù).所以p1===p2.但通過new創(chuàng)建的Promise對象都是一個新的對象,所以后面三個比較結(jié)果都是false.另外,為什么p4的then最先調(diào)用,但是在控制臺上是最后輸出結(jié)果的呢?因為p4中resolve接受的參數(shù)是一個Promise對象p1,reslove會對p1進行解析,獲取p1的狀態(tài)和值,但是這個過程是異步的.

8.resolve v reject.

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

p1.then(value => {
    console.log(`p1 fulfilled: ${value}`);
}, err => {
    console.log(`p1 rejected: ${err}`);
});
p2.then(value => {
    console.log(`p2 fulfilled: ${value}`);
}, err => {
    console.log(`p2 rejected: ${err}`);
});
p3.then(value => {
    console.log(`p3 fulfilled: ${value}`);
}, err => {
    console.log(`p3 rejected: ${err}`);
});

控制臺輸出:

p3 rejected: [object Promise]
p1 fulfilled: resolve
p2 rejected: reject

Promise回調(diào)函數(shù)中的第一個參數(shù)resolve,會對Promise執(zhí)行解析,即resolve的參數(shù)是Promise對象時,resolve會解析獲取這個Promise對象的狀態(tài)和值,但這個過程是異步的.p1解析后,獲取到Promise對象的狀態(tài)是resolved,因此第一個回調(diào)被執(zhí)行也就是獲取value的回調(diào);p2解析后,獲取到Promise對象的狀態(tài)rejected,因此rejected回調(diào)執(zhí)行.但Promise回調(diào)函數(shù)中的第二個參數(shù)reject不具備解析能力,reject的參數(shù)會直接傳遞給then方法中的rejected回調(diào),因此,即使p3 reject接受了一個resolved狀態(tài)的Promise,then方法中調(diào)用的依然是rejected,并且參數(shù)就是reject接受到的Promise對象.