Promise

brianway 發(fā)布于2019-08-22 16:39 / 1976人閱讀

摘要：的狀態(tài)對(duì)象有三種狀態(tài)初始狀態(tài)，既不是也不是成功。創(chuàng)建的基本語法使用來調(diào)用的構(gòu)造器進(jìn)行實(shí)例化注意時(shí)，會(huì)立即執(zhí)行。等同于以下形式報(bào)錯(cuò)注意要想調(diào)用之后返回的對(duì)象的不是，必須一個(gè)值和返回對(duì)象的狀態(tài)是，而不是

1 Promise的狀態(tài)
1.1 Promise對(duì)象有三種狀態(tài)：
pending 初始狀態(tài)，既不是resolved也不是rejected;
resolved 成功。此時(shí)調(diào)用onFulfilled;
rejected 失敗。此時(shí)調(diào)用onRejected;
resolved和rejected都可以表示為settled.最初Promise為pending狀態(tài)，在執(zhí)行后轉(zhuǎn)為settled狀態(tài)，而settled狀態(tài)分為兩種：在成功后轉(zhuǎn)為resolved，執(zhí)行.then(onFulfilled)方法；在失敗后轉(zhuǎn)為reject，執(zhí)行.then(onRejected)或.catch(onRejected)，進(jìn)行異步操作，再返回Promise對(duì)象。

2 創(chuàng)建Promise的基本語法：
2.1 使用new來調(diào)用Promise的構(gòu)造器進(jìn)行實(shí)例化

var promise = new Promise(function(resolve, reject) {
  if(...) {
   resolve(data);
  } else {
   reject(new Error("error"));
  }
});
注意：new Promise(func)時(shí)，func會(huì)立即執(zhí)行。

e.g.1
new Promise(function(resolve, reject) {
  console.log("#1");
  resolve(1);//執(zhí)行完這行，內(nèi)部屬性[[PromiseStatus]]和[[PromiseValue]]都變了，分別由pending -> resolved, undefined -> 1
  console.log("#2");
}).then(function() {
  console.log("#3");
}); // #1 #2 #3 先執(zhí)行主線程執(zhí)行棧中的代碼

e.g.2
new Promise(function(resolve, reject) {
  console.log("#1");
  reject(4);//執(zhí)行完這行，內(nèi)部屬性[[PromiseStatus]]和[[PromiseValue]]都變了，分別由pending -> rejected, undefined -> 4
  console.log("#2");
}); // #1 #2 報(bào)錯(cuò)：Uncaught (in promise) Error: reject(…) 因?yàn)楹竺鏇]有then/catch提供的onRejected回調(diào)，異常沒有被消費(fèi)掉

P.S. reject的參數(shù)可以是任意類型的，但一般都傳入 Error對(duì)象表示錯(cuò)誤原因

2.2 Promise.resolve & Promise.reject
Promise.resolve & Promise.reject可以認(rèn)為是new Promise()的快捷方式，返回值也是一個(gè)promise對(duì)象，所以可以進(jìn)行鏈?zhǔn)秸{(diào)用。

Promise.resolve(4); // Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 4}
等同于以下代碼
new Promise(function(resolve) {
  resolve(4);
});
 
Promise.reject(4); // Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: 4}
//等同于以下代碼
new Promise(function(resolve, reject) {
  reject(4);
})

3 Promise.prototype.then(function onFulfilled() {...}, function onRejected() {...})
當(dāng)resolve(成功)時(shí)，會(huì)調(diào)用onFulfilled函數(shù)；reject(失敗)時(shí)，會(huì)調(diào)用onRejected函數(shù)。若只想處理異常情況的函數(shù)，可promise.then(undefined, onRejected)，當(dāng)然更好的選擇是用promise.catch()來處理。二者效果相同。

promise.then(function (value) {
  console.log(value); 
}).catch(function (error) {
  console.log(error);
});
//等同于以下形式
promise.then(function (value) {
  console.log(value);
}, function (error) {
  console.log(error);
});
 
e.g.3
new Promise(function(resolve, reject) {
  resolve(2);
}); // Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 2}

e.g.4
new Promise(function(resolve, reject) {
  resolve(2);
}).then(function() {
  console.log("ha");
}); // ha Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}

e.g.5
new Promise(function(resolve, reject) {
  resolve(2);
}).then(function() {
  return "haha";
}); // Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "haha"}

e.g.6
new Promise(function(resolve, reject) {
  reject(2);
}); // Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: 2} 報(bào)錯(cuò)：Uncaught (in promise) 2

e.g.7
new Promise(function(resolve, reject) {
  reject(2);
}).then(function() {
}, function() {
  console.log("ha");
}); // ha Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}

e.g.8
new Promise(function(resolve, reject) {
  reject(2);
}).then(function() {
}, function() {
  return "haha";
}); // Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "haha"}

注意：要想調(diào)用then之后返回的promise對(duì)象的[[PromiseValue]]不是undefined，必須return一個(gè)值；
e.g.7和e.g.8返回對(duì)象的狀態(tài)是 resolved，而不是 rejected.