Как мне обрабатывать асинхронный код в обещании?

Question

По сути, у меня есть обещание, которое содержит несколько вызовов API в цикле, который добавляет результаты в массив, который, в свою очередь, разрешается с помощью 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,console

Выход: [undefined, undefined]

Как мне убедиться, что массив полностью разрешен, прежде чем переходить к его печати?

Answer 1

Вы вызываете метод решимости вне внутреннего асинхронного вызова, что означает, что он вызывается преждевременно.

Попробуйте вместо этого:

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 2

Ваша проблема в пропущенном операторе возврата внутри функции карты. Без оператора return он возвращает undefined. Просто поставьте return перед fetch:

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

Вам также следует избегать использования конструктора Promise. Вам это не нужно и вы можете просто вернуть Обещание, созданное Promise.all:

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);
}

Answer 3

Promise.all ожидает массив обещаний, а 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,console