使用 async wait 从多个 api 获取数据

Eri*_*nga 6 javascript async-await reactjs

Async/await 在异步获取数据时派上用场,尤其是在

async componentDidMount() {
    try {
       const response = await axios.get(endpoints.one)
       const data = await response
       this.setState({ data, isLoading: false })
    } catch (e) {
       this.setState({ errors: e.response })
    }

}
Run Code Online (Sandbox Code Playgroud)

此外,当从多个端点获取时,可以轻松地使用

Promise.all([
  fetch(endpoints.one),
  fetch(endpoints.two),
]).then(([data1, data2]) => {
  console.log(data1, data2)
}).catch((err) => {
  console.log(err);
});
Run Code Online (Sandbox Code Playgroud)

然而,如何使用aync/await 而不是Promise.all从多个源获取数据呢?

Nic*_*wer 12

如果你想并行执行它们,那么你仍然会使用 Promise.all。只是你会得到await结果而不是打电话.then

async someFunction() {
  try {
    const [data1, data2] = await Promise.all([
      fetch(endpoints.one),
      fetch(endpoints.two),
    ]);
    console.log(data1, data2);
  } catch (err) {
    console.log(err);
  }
}
Run Code Online (Sandbox Code Playgroud)