摘要：使用承諾對象使我們有機(jī)會將異步操作的最終成功或失敗關(guān)聯(lián)到功能無論出于何種原因。例如在上面的示例中函數(shù)解析為值在成功完成時(shí)并在返回值這是另一個承諾上調(diào)用函數(shù)依此類推等等。這意味著我們只能返回一個承諾一次。

本文轉(zhuǎn)載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3814
原文：https://www.fullstackreact.com/30-days-of-react/day-15/

今天，我們將要看看我們需要知道什么來從高層次了解Promises，所以我們可以使用這個非常有用的概念構(gòu)建我們的應(yīng)用。

昨天我們將 fetch 庫安裝到我們的 create-react-app 項(xiàng)目 我們開始 第12天. 今天, 我們將拿起從昨天討論的概念和Promises的 藝術(shù) .

正如 mozilla 所定義的, 承諾對象用于處理異步計(jì)算, 其中有一些重要的保證難以用回調(diào)方法處理 (更老式的處理異步代碼的方法)。

Promise 對象只是圍繞一個值的包裝, 它在實(shí)例化對象時(shí)可能也可能不知道, 并提供了一個已知的 (也稱為 resolved) 或由于失敗原因而不可用 (我們將此稱為rejected) 后 處理該值的方法 。

使用 "承諾" 對象使我們有機(jī)會將異步操作的最終成功或失敗關(guān)聯(lián)到功能 (無論出于何種原因)。它還允許我們使用類似于同步的代碼來處理這些復(fù)雜的場景。

例如, 考慮下面的同步代碼, 我們在 javascript 控制臺中打印出當(dāng)前時(shí)間:

var currentTime = new Date();
console.log("The current time is: " + currentTime);

這是相當(dāng)直接的, 并作為 new Date() 對象表示瀏覽器知道的時(shí)間。現(xiàn)在考慮我們在其他遠(yuǎn)程機(jī)器上使用不同的時(shí)鐘。例如, 如果我們正在做一個快樂的新年時(shí)鐘, 這將是偉大的, 能夠同步用戶的瀏覽器與其他人使用一個單一的時(shí)間值為每個人, 所以沒有人錯過的落球儀式。。

假設(shè)我們有一個方法來處理從遠(yuǎn)程服務(wù)器獲取當(dāng)前時(shí)間的 getCurrentTime() 時(shí)鐘?，F(xiàn)在, 我們將用setTimeout() 來表示這一點(diǎn), 它返回時(shí)間 (就像對慢速 api 發(fā)出請求一樣):

function getCurrentTime() {
  // Get the current "global" time from an API
  return setTimeout(function() {
    return new Date();
  }, 2000);
}
var currentTime = getCurrentTime()
console.log("The current time is: " + currentTime);

我們的console.log() 日志值將返回超時(shí)處理程序 id, 這絕對 不是 當(dāng)前時(shí)間。傳統(tǒng)上, 我們可以使用回調(diào)來更新代碼, 以便在可用時(shí)間時(shí)調(diào)用:

function getCurrentTime(callback) {
  // Get the current "global" time from an API
  return setTimeout(function() {
    var currentTime = new Date();
    callback(currentTime);
  }, 2000);
}
getCurrentTime(function(currentTime) {
  console.log("The current time is: " + currentTime);
});

如果有其余的錯誤呢？我們?nèi)绾尾东@錯誤并定義重試或錯誤狀態(tài)？

function getCurrentTime(onSuccess, onFail) {
  // Get the current "global" time from an API
  return setTimeout(function() {
    // randomly decide if the date is retrieved or not
    var didSucceed = Math.random() >= 0.5;
    if (didSucceed) {
      var currentTime = new Date();
      onSuccess(currentTime);
    } else {
      onFail("Unknown error");
    }
  }, 2000);
}
getCurrentTime(function(currentTime) {
  console.log("The current time is: " + currentTime);
}, function(error) {
  console.log("There was an error fetching the time");
});

現(xiàn)在, 如果我們想根據(jù)第一個請求的值提出請求怎么辦？作為一個簡短的示例, 讓我們再次重用 getCurrentTime() 函數(shù) (就好像它是第二個方法, 但允許我們避免添加另一個復(fù)雜的函數(shù)):

function getCurrentTime(onSuccess, onFail) {
  // Get the current "global" time from an API
  return setTimeout(function() {
    // randomly decide if the date is retrieved or not
    var didSucceed = Math.random() >= 0.5;
    console.log(didSucceed);
    if (didSucceed) {
      var currentTime = new Date();
      onSuccess(currentTime);
    } else {
      onFail("Unknown error");
    }
  }, 2000);
}
getCurrentTime(function(currentTime) {
  getCurrentTime(function(newCurrentTime) {
    console.log("The real current time is: " + currentTime);
  }, function(nestedError) {
    console.log("There was an error fetching the second time");
  })
}, function(error) {
  console.log("There was an error fetching the time");
});

以這種方式處理 異步 會很快變得復(fù)雜。此外, 我們可以從以前的函數(shù)調(diào)用中獲取值, 如果我們只想得到一個... 在處理應(yīng)用啟動時(shí)還沒有的值時(shí), 有很多棘手的情況需要處理。

使用承諾, 另一方面幫助我們避免了很多這種復(fù)雜性 (雖然不是一個銀彈解決方案,參考《人月神話》)。以前的代碼, 這可以被稱為意大利面條代碼可以變成一個更整潔, 更同步的前瞻版本:

function getCurrentTime(onSuccess, onFail) {
  // Get the current "global" time from an API using Promise
  return new Promise((resolve, reject) => {
    setTimeout(function() {
      var didSucceed = Math.random() >= 0.5;
      didSucceed ? resolve(new Date()) : reject("Error");
    }, 2000);
  })
}
getCurrentTime()
  .then(currentTime => getCurrentTime())
  .then(currentTime => {
    console.log("The current time is: " + currentTime);
    return true;
  })
  .catch(err => console.log("There was an error:" + err))

以前的源代碼示例對正在發(fā)生的事情進(jìn)行了一些清理和清除, 避免了許多棘手的錯誤處理/捕獲。

為了獲得成功的值, 我們將使用Promise 實(shí)例對象上的 then() 功能。then() 函數(shù)被調(diào)用, 無論返回值是Promise本身。例如, 在上面的示例中, getCurrentTime() 函數(shù)解析為currentTime() 值 (在成功完成時(shí)), 并在返回值 (這是另一個承諾) 上調(diào)用then() 函數(shù), 依此類推等等。

要捕獲在承諾鏈中任何地方發(fā)生的錯誤, 我們可以使用catch() 方法。

我們在上面的例子中使用一個承諾鏈, 以創(chuàng)建一個 鏈 的行動, 被稱為一個接一個。
承諾鏈聽起來很復(fù)雜, 但基本上很簡單。實(shí)質(zhì)上, 我們可以連續(xù)地 "同步" 調(diào)用多個異步操作。對then() 的每次調(diào)用都用以前的then() 函數(shù)的返回值來調(diào)用。
例如, 如果我們想操縱getCurrentTime() 調(diào)用的值, 我們可以在鏈中添加一個鏈接, 如下所示:
getCurrentTime()
  .then(currentTime => getCurrentTime())
  .then(currentTime => {
    return "It is now: " + currentTime;
  })
  // this logs: "It is now: [current time]"
  .then(currentTimeMessage => console.log(currentTimeMessage))
  .catch(err => console.log("There was an error:" + err)) 

承諾在任何特定的時(shí)間都只應(yīng)該在三種狀態(tài)之一:

待定

已完成 (已解決)

已拒絕 (錯誤)

一個 待定 的承諾只能導(dǎo)致一個滿足狀態(tài)或一個被拒絕的狀態(tài) 一次且僅一次 , 這可以避免一些相當(dāng)復(fù)雜的錯誤場景。這意味著, 我們只能返回一個承諾一次。如果我們想重新運(yùn)行一個使用承諾的函數(shù), 我們需要創(chuàng)建一個 新 的。

我們可以使用 Promise構(gòu)造函數(shù)來創(chuàng)建新的承諾 (如上面的示例所示)。它接受一個有兩個參數(shù)來運(yùn)行的函數(shù):

onSuccess (or resolve) 函數(shù)將在成功解析后被調(diào)用

onFail (or reject) 函數(shù)在失敗拒絕后被調(diào)用

從上面回顧我們的函數(shù), 我們可以看到, 如果請求成功, 我們調(diào)用 resolve() 函數(shù), 如果該方法返回錯誤條件, 則調(diào)用 reject() 函數(shù)。

var promise = new Promise(function(resolve, reject) {
  // call resolve if the method succeeds
  resolve(true);
})
promise.then(bool => console.log("Bool is true"))

現(xiàn)在我們知道了什么是承諾, 如何使用, 以及如何創(chuàng)建它們, 我們實(shí)際上可以使用昨天安裝的 fetch() 庫。