Promise then() 方法

關於Promise物件的基本介紹可以參閱JavaScript Promise 物件一章節。

本文將通過程式碼例項介紹一下Promise then() 的用法。

方法具有兩個引數，分別作為Promise物件變為Resolved與Rejected狀態時的回撥函式。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
p.then(onResolved, onRejected);

語法分析：

（1）.onResolved：必需，當Promise物件變為Resolved狀態時呼叫的函式。

（2）.onRejected：可選，當Promise物件變為Rejected狀態時呼叫的函式。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let p = new Promise(function(resolve, reject) {
  if (true) {
    resolve();
  } else {
    reject();
  }
});

p.then(function () {
  console.log("螞蟻部落一");
}, function() {
  console.log("螞蟻部落二");
});

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.呼叫Promise建構函式後，其回撥函式會立馬被呼叫。

（2）.通過if語句判斷之後，resolve()會被呼叫，於是Promise物件狀態變為Resolved。

（3）.於是就會執行then的第一個回撥函式，列印結果是"螞蟻部落一"。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let p = new Promise(function(resolve, reject) {
  if (true) {
    resolve("螞蟻部落");
  } else {
    reject("css教程");
  }
});
  
p.then(function (value) {
  console.log(value);
}, function (value) {
  console.log(value);
});

程式碼執行效果截圖如下：

then()兩個回撥函式都可以接受引數，引數值是為對應的resolve()和reject()傳遞的引數值。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let p = new Promise(function(resolve, reject) {
  resolve("螞蟻部落");
});
p.then(function (value) {
  console.log(value);
  return value + "前端";
}).then(function(value) {
  console.log(value);
});

then()方法返回一個promise物件，所以可以使用鏈式呼叫方式。

程式碼執行效果截圖如下：

上述程式碼中，第二個then()方法的回撥函式的引數是上一個then回撥函式的返回值。

再來看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼
getJSON("post.json").then(function(json) {
  return json.post;
}).then(function(post) {
  //code
});

程式碼分析如下：

（1）.程式碼採用採用鏈式呼叫，假設getJSON()返回一個Promise物件。

（2）.第一個回撥函式完成以後，會將返回結果作為引數，傳入第二個then的回撥函式。

（3）.採用鏈式的then，可以指定一組按照次序呼叫的回撥函式。

（4）.鏈式呼叫中，前一個回撥函式可能返回一個Promise物件，也就是存在非同步操作。

（5）.後一個回撥函式會等待Promise物件的狀態發生變化，才會被呼叫。

再來看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼
getJSON("post.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function funcA(comments) {
  console.log("Resolved: ", comments);
}, function funcB(err){
  console.log("Rejected: ", err);
});

程式碼分析如下：

（1）.第一個then的回撥函式，返回另一個 Promise物件。

（2）.此時，第二個then的回撥函式，就會等待這個新的Promise物件狀態發生變化。

（3）.如果變為Resolved ，就呼叫funcA，如果狀態變為Rejected ，就呼叫funcB。