如何获得基于异步等待/promise 的响应

Question

所以我有一个代码如下。 有一个 function 调用 2 个 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);
    })
}

然后我想运行这个 function fetch_records() 如下

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

所以 output 应该是

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

但是因为 Javascript 是异步的，所以它总是给 output 如下

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

我相信 async/await 或 promise 用于实现我想要的响应，但我不确定如何准确使用它。

Answer 1

只需使用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);
  }
})();

Answer 2

更改您的 function 以返回承诺：

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：

Promise.all(fetch_records()).then(function(response) {
  console.log(response[0], response[1]);
});

Answer 3

 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将等到所有承诺都得到解决， 更多关于它

Answer 4

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 function getData() {
   let data = await fetch_records();
   console.log("Fetch Records :: ", data);
}