1Promise承諾(期約)
什么是Promise:Promis是異步編程的一種解決方案屋确,簡(jiǎn)單來(lái)說(shuō)Promise就是一個(gè)容器保存著一個(gè)未來(lái)才會(huì)結(jié)束的事件(一般是異步操作)的結(jié)果。
1.1特點(diǎn)
1躲因、對(duì)象的狀態(tài)不受外界影響。
2乐尊、一旦狀態(tài)改變悬秉,就不會(huì)再變,任何時(shí)候都可以得到這個(gè)結(jié)果南缓。
1.2狀態(tài)
Promise對(duì)象代表一個(gè)異步操作,有三種狀態(tài):
pending(進(jìn)行中)荧呐、resolved(已成功)和rejected(已失敽盒巍)纸镊。
只有異步操作的結(jié)果,可以決定當(dāng)前是哪一種狀態(tài)获雕,任何其他操作都無(wú)法改變這個(gè)狀態(tài)薄腻。
1.3缺點(diǎn)
1收捣、無(wú)法取消Promise届案,一旦新建它就會(huì)立即執(zhí)行,無(wú)法中途取消罢艾。
2楣颠、如果不設(shè)置回調(diào)函數(shù),Promise內(nèi)部拋出的錯(cuò)誤咐蚯,不會(huì)反應(yīng)到外部童漩。
舉個(gè)例子:
let promise1 = new Promise((res, rej) => {
rej('11');
}).catch(err => {
console.log('err1', err);//err1 11
})
let promise2 = new Promise((res, rej) => {
rej('11');
}).then(null, err => {
console.log('err2', err);//err2 11
})
let promise3 = new Promise((res, rej) => {
rej('11');
})//報(bào)錯(cuò),Uncaught (in promise) 11
3、當(dāng)處于pending狀態(tài)時(shí)春锋,無(wú)法得知目前進(jìn)展到哪一個(gè)階段(剛剛開始還是即將完成)矫膨。
1.4基本用法
let promise = new Promise(function(resolve,reject){
// resolve 成功后調(diào)用
// reject 失敗后調(diào)用
})
promise.then(res => {
//傳入成功狀態(tài)參數(shù)
},err => {
//傳入失敗狀態(tài)參數(shù)
})
1.5 then方法
then方法返回的是一個(gè)Promise對(duì)象。因此使用then方法后還能繼續(xù)使用then方法期奔。
let aa = Promise.resolve('11');
console.log(aa.then());//Promise {<fulfilled>: "11"}
then方法根據(jù)不同的狀態(tài)侧馅,看看需要走then的第一個(gè)參數(shù)還是第二個(gè)。
resolve()和reject()的參數(shù)會(huì)傳遞到對(duì)應(yīng)的回調(diào)函數(shù)的data或err呐萌。
aa.then(data => {
console.log(data)
},
err => {
console.log(err)
}
)
1.6捕獲錯(cuò)誤
.catch方法是.then(null, rejection)的別名馁痴,用于指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)。
再來(lái)展示一下:
let promise1 = new Promise((res, rej) => {
rej('11');
}).catch(err => {
console.log('err1', err);//err1 11
})
let promise2 = new Promise((res, rej) => {
rej('11');
}).then(null, err => {
console.log('err2', err);//err2 11
})
講一下then(null,err => {});用null代替resolve狀態(tài)走的then的第一個(gè)參數(shù)肺孤,那么第二個(gè)自然就是失斅拊巍(reject)狀態(tài)走的嘍。
1.7 resolve與reject方法.
可以方便的創(chuàng)建一個(gè)已經(jīng)是成功或失敗狀態(tài)的Promise對(duì)象赠堵。
Promise.resolve('成功');
//等價(jià)于
new Promise((resolve,reject) => {
resolve('成功')
})
Promise.resolve('失敗');
//等價(jià)于
new Promise((resolve,reject) => {
reject('失敗')
})
接收參數(shù)的四種情況小渊。
1.Promise.resolve()
1、參數(shù)是一個(gè)Promise實(shí)例
let promise = new Promise((resolve, reject) => {
resolve('成功');
})
let test1 = Promise.resolve(promise);
console.log(test1);//Promise {<fulfilled>: "成功"}
resolve()方法保留Promise實(shí)例的狀態(tài)茫叭。
2粤铭、參數(shù)是一個(gè)是具有then方法的對(duì)象。
let thenable = {
then: function(resolve, reject) {
resolve(42);
}
};
let test2 = Promise.resolve(thenable);
console.log(test2); // Promise {<pending>}
test2.then(res => {
console.log(res);//42
})
Promise.resolve方法會(huì)將thenable轉(zhuǎn)為 Promise 對(duì)象杂靶,然后就立即執(zhí)行thenable對(duì)象的then方法梆惯。而后對(duì)象p1的狀態(tài)就變?yōu)閞esolved,從而立即執(zhí)行最后那個(gè)then方法指定的回調(diào)函數(shù)吗垮,輸出 42垛吗。
3、參數(shù)不是對(duì)象烁登。
const p = Promise.resolve('Hello');
p.then(function (s){
console.log(s)
});
// Hello
4怯屉、不帶參數(shù)蔚舀。
const p = Promise.resolve();//Promise {<fulfilled>: undefined}
2.Promise.reject()
原封不動(dòng)的返回reject狀態(tài)。
特別的是锨络,當(dāng)參數(shù)為包含then方法的對(duì)象時(shí)赌躺。
let thenable = {
then: function(resolve, reject) {
resolve('出錯(cuò)');
}
};
let test2 = Promise.reject(thenable);
test2.then(null, err => {
console.log(err); //{then: ?}
})
這里返回的不是 “出錯(cuò)” 。而是整個(gè)then對(duì)象羡儿。
3.Promise.all()
all()方法的參數(shù)都是promise對(duì)象,切必須都是resolve狀態(tài)礼患。
let p1 = Promise.resolve('p1');
let p2 = Promise.resolve('p2');
let p3 = Promise.resolve('p3');
Promise.all([p1, p2, p3]).then(res => {
let [res1, res2, res3] = res;
console.log(res1, res2, res3);//p1,p2,p3
})
//當(dāng)有一個(gè)參數(shù)是reject狀態(tài)時(shí)
let p1 = Promise.resolve('p1');
let p2 = Promise.reject('p2');
let p3 = Promise.resolve('p3');
Promise.all([p1, p2, p3]).then(res => {
let [res1, res2, res3] = res;
console.log(res1, res2, res3); //Uncaught (in promise) p2
})
3.Promise.race()
Promise.race([p1,p2,p3])
這個(gè)和all用法一樣,唯一不同之處就是race方法,只要最前面一個(gè)resolve就可以正常執(zhí)行,如果第一個(gè)是rejecj狀態(tài)就報(bào)錯(cuò)掠归。
let p1 = Promise.resolve('p1');
let p2 = Promise.resolve('p2');
let p3 = Promise.reject('p3');
Promise.race([p1, p2, p3]).then(res => {
console.log(res) //p1
})
//如果第一個(gè)是reject的話
let p1 = Promise.reject('p1');
let p2 = Promise.resolve('p2');
let p3 = Promise.resolve('p3');
Promise.race([p1, p2, p3]).then(res => {
console.log(res) // Uncaught (in promise) p1
})