如何在沒有async / await的情況下從待解決的承諾中獲取數據？

Question

我有抽象：

function fetchDataFromAPI() {
  const url = `https://api...`
  return fetch(url).then(response => response.json())
}

我想在我的另一段代碼中使用它，例如：

if(something){
  const data = fetchDataFromAPI()
  return data 
}

如果我console.log數據我得到的是已解決的待決承諾

Promise {<pending>}
  __proto__: Promise
  [[PromiseStatus]]: "resolved"
  [[PromiseValue]]: Object

如何在data而不是Promise中獲取該對象？

Answer 1

為了避免異步/ AWAIT，你需要使用另一個.then ：

if (something) {
  return fetchDataFromAPI()
    .then((data) => data /* you can console.log(data) here */)
}

Answer 2

不，你不能不使用promises或async / await等因為調用REST API是一個異步操作並且是非阻塞的。

當您調用REST API時，代碼不應該等到API返回值，因為它可能會花費很多時間，使程序無響應，因此通過設計使網絡請求被歸類為異步操作。

Answer 3

Promise是一種語言結構，它使JavaScript引擎繼續執行代碼而無需等待內部函數的返回，也稱為執行程序。

var p = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

console.log(p);

基本上，承諾是回調的美化語法糖。 我們將看到如何，但首先讓我們有一個更現實的代碼：

function someApiCall(){
  return new Promise(function(resolve, reject){
    setTimeout(()=>{
      resolve('Hello');
    })
  })
}

let data = someApiCall();

console.log(data);

這是一個所謂的異步代碼，當javascript引擎執行它時，someApiCall會立即返回一個結果，在這種情況下是掛起的promise：

> Promise {<pending>}

如果你注意執行者，你會發現我們需要通過解決並拒絕參數，即回調。 是的，它們是回調，內置於語言中。 當他們中的任何一個打電話時，諾言將改變其狀態，從而得到解決。 我們不會將其解析，因為解析意味着成功執行，但函數也可能出錯。

我們如何獲取數據？ 好吧，我們需要更多的回調，一旦承諾結算，執行函數將調用它們：

var p = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

p.then((result) => {
  console.log(result); // foo
}).catch((err) => {
  console.log(err);
});

為什么我們需要傳遞單獨的回調？ 因為一個將被提供給解決回調，而另一個將被拒絕。 然后通過resolve函數調用回調，通過reject函數捕獲回調。

Javascript引擎稍后將在休閑時執行這些回調，對於常規函數，它意味着在事件循環被清除時，在時間到期時超時。

現在回答你的問題，我們如何從承諾中獲取數據。 好吧，我們不能。

如果你仔細觀察，你會發現我們並沒有真正得到數據，但繼續喂食回調。 沒有獲取數據，但傳遞回調。

p.then((result) => {
  console.log(result);
}).catch((err) => {
  console.log(err);
});

有人說用await：

async function() {
  let result = await p;
}

但是有一個問題！ 我們必須將其包裝在異步函數中。 總是。 為什么？ 因為Async / await是另一個抽象級別或語法糖，無論你喜歡什么，在promise api之上。 這就是為什么我們不能直接使用await但總是將它包裝在異步語句中。

總而言之，當我們使用promise或async / await時，我們需要遵循某些約定並用緊密編織的回調編寫簡潔代碼。 無論是javascript引擎還是像babeljs或typescript這樣的轉換器都會將這些代碼轉換為常規的javascript來運行。

我可以理解你的困惑，因為人們在談論promises時不斷說出數據，但是我們沒有得到任何數據，但是在數據准備就緒時傳遞回調。

希望現在一切都清楚了。