如何在Promise中處理異步代碼？

Question

基本上，我可以保證在一個循環中具有多個API調用，並將結果附加到數組中，然后由Promise.all解決。 但是，代碼似乎從不將數組的值返回給Promise.all而僅返回未解決的Promise.all 。

這是復制的代碼-

function func1(data) {

return new Promise(function(resolve, reject) {
  var arr1 = data.split(". ");
  var another_arr = arr1.map(function(sent) {
    fetch('https://pokeapi.co/api/v2/pokemon/1/')
      .then(function(response) {
        return response.json();
      })
  })
  resolve(Promise.all(another_arr))
})
}

function func_main() {
  var some_string = "This is a sentence. This is another sentence."
  this.func1(some_string).then(function(value) {
  console.log(value)
})
}

func_main()

https://jsbin.com/vemasopojo/edit?js，控制台

輸出： [undefined, undefined]

在繼續打印之前，如何確保陣列完全解析？

Answer 1

Promise.all期望一個promises數組，並且map回調函數應該返回將被映射到新數組的值。

實際上，您正在傳遞未定義對象的數組，因為map函數根本不返回任何東西。

您應該返回fetch調用以使其正常工作

var another_arr = arr1.map(function(sent) {
   return fetch('https://pokeapi.co/api/v2/pokemon/1/')
    .then(function(response) {
      return response.json();
    })
  })

https://jsbin.com/zeyoxazova/2/edit?js，控制台

Answer 2

您在內部異步調用外部調用resolve，這意味着它被過早調用。

嘗試以下方法：

function func1(data) {
  return new Promise(function(resolve, reject) {
    var arr1 = data.split(". ");
    var another_arr = arr1.map(function(sent) {
      fetch('https://pokeapi.co/api/v2/pokemon/1/')
        .then(function(response) {
          resolve(response.json())
      })
    })
  })
}

感覺應該有一種更優雅的方法來執行此操作，但是無論如何它應該可以為您提供所需的數據。

Answer 3

您的問題是map函數內部缺少return語句。 沒有return語句，它將返回undefined。 只需將return放在獲取之前：

return fetch('https://pokeapi.co/api/v2/pokemon/1/')
  .then(...

您還應該避免使用Promise構造函數。 您在那里不需要它，可以直接返回Promise.all創建的Promise：

function func1(data) {
  var arr1 = data.split(". ");
  var another_arr = arr1.map(function(sent) {
    return fetch('https://pokeapi.co/api/v2/pokemon/1/')
      .then(function(response) {
        return response.json();
      });
    });
  return Promise.all(another_arr);
}