Как получить асинхронный ответ на основе ожидания / обещания - PullRequest
Новая
       24

Как получить асинхронный ответ на основе ожидания / обещания

0 голосов
/ 14 октября 2019

Итак, у меня есть код, как показано ниже. Есть функция, которая вызывает два запроса axios для выборки некоторых данных API. 

function fetch_records(){
  var api_url1 = "https://api.github.com/users/mojombo"
  var api_url2 = "https://api.github.com/users/defunkt"

  axios.get(api_url1)
    .then(function (response) {
      console.log('Data1 received: ',response);
    })
    .catch(function (error) {
      console.log(error);
    })

  axios.get(api_url2)
    .then(function (response) {
      console.log('Data2 received: ',response);
    })
    .catch(function (error) {
      console.log(error);
    })
}

И затем я хочу запустить эту функцию fetch_records (), как показано ниже 

console.log('Script started');
fetch_records();
console.log('Script ended');

, чтобывывод должен быть 

Script started
... api response data ...
Script ended

Но поскольку Javascript является асинхронным, он всегда дает вывод, как показано ниже 

Script started
Script ended
... api response data ...

Я верю, что асинхронность / ожидание или обещание используется для получения ответа, который я хочу, но яЯ не уверен, как именно это использовать.

Ответы [ 4 ]

0 голосов
/ 14 октября 2019 
function fetch_records() {
  var api_url1 = "https://api.github.com/users/mojombo";
  return new Promise((resolve, reject) => {
    axios
      .get(api_url1)
      .then(function(response) {
        console.log("Data1 received: ", response);
        resolve(response);
      })
      .catch(function(error) {
        console.log(error);
        reject(error);
      });
  });
}

Использование с Async / Await: 

async function getData() {
   let data = await fetch_records();
   console.log("Fetch Records :: ", data);
}
0 голосов
/ 14 октября 2019

измените вашу функцию, чтобы она возвращала обещания: 

function fetch_records() { 
 var api_url1 = "https://api.github.com/users/mojombo"
 var api_url2 = "https://api.github.com/users/defunkt"

const promise1 = axios.get(api_url1)
.then(function (response) {
  console.log('Data1 received: ',response);
})
.catch(function (error) {
  console.log(error);
})

const promise2 = axios.get(api_url2)
.then(function (response) {
  console.log('Data2 received: ',response);
})
.catch(function (error) {
  console.log(error);
});

 return [promise1, promise2];

}

теперь используйте обещание. Все: 

Promise.all(fetch_records()).then(function(response) {
  console.log(response[0], response[1]);
});
0 голосов
/ 14 октября 2019 

function fetch_records() {
  var api_url1 = "https://api.github.com/users/mojombo"
  var api_url2 = "https://api.github.com/users/defunkt"

  return [
    axios.get(api_url1),
    axios.get(api_url2)
  ]
}

console.log('Script started');
Promise.all(fetch_records()).then(res => {
  console.log(res);
  console.log('Script ended');
})

Promise.all будет ждать решения всех обещаний, подробнее об этом

0 голосов
/ 14 октября 2019

Просто используйте async/await ключевые слова, но помните, что JS всегда есть JS. 

async function fetch_records() { // a async function
  var api_url1 = "https://api.github.com/users/mojombo"
  var api_url2 = "https://api.github.com/users/defunkt"

  // waterfall way
  const data1 = await axios.get(api_url1); // await
  console.log('Data1 received: ', data1);

  const data2 = await axios.get(api_url2); // await
  console.log('Data2 received: ', data2);

  // parallel way
  // const [data1, data2] = await Promise.all([
  //   axios.get(api_url1),
  //   axios.get(api_url2)
  // ]);
  // console.log(data1, data2);
}

(async () => {
  try {
    console.log('Script started');
    await fetch_records(); // await a async function (Thenable object)
    console.log('Script ended');
  } catch(err) {
    console.error(err);
  }
})();
...