Question

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

然后我要如下运行此函数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 ...

我相信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 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将等到所有的诺言都解决，more about it

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 / Await一起使用：

async function getData() {
   let data = await fetch_records();
   console.log("Fetch Records :: ", data);
}

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

4 个答案: