如何在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);
}