javascript - 使用 promise.all 组合两个 Promise

标签 javascript vue.js es6-promise

在我的 VUE JS 应用程序中,我有来自两个不同 API 调用的两个 promise ,我在想也许可以使用 promise.all() 将两者结合起来。方法?如果是这样,我该怎么做?

API.js

async function getForecast(lat, lon) {
  try {
    const response = await fetch(`${WEATHER_API_URL}&lat=${lat}&lon=${lon}`);
    return await response.json();
  } catch (error) {
    console.log(error);
  }
}

async function getAddress(lat, lon) {
  try {
    const response = await fetch(`${ADDRESS_API_URL}&lat=${lat}&lon=${lon}`);
    return await response.json();
  } catch (error) {
    console.log(error);
  }
}

应用程序.vue

loadWeather(lat, lon) {
  API.getAddress(lat, lon).then(result => {
    this.address = result.name;
  });
  API.getForecast(lat, lon).then(result => {
    this.forecast = result;
  });
}

最佳答案

除了现有的答案,这是 async..await变得有用,因为它已经用于其他功能。 Promise.all 的数组解析为可以解构:

async loadWeather(lat, lon) {
  const [address, forecast] = await Promise.all([
    API.getAddress(lat, lon),
    API.getForecast(lat, lon)
  ]);
  this.address = address.name;
  this.forecast = forecast;
}

关于javascript - 使用 promise.all 组合两个 Promise,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61295652/

相关文章:

javascript - 数据表中的字母数字零填充?

javascript - 带 child 的 JSON 解析器

javascript - 从给定索引 javascript 的表中删除列

javascript - 如何在填充特定值时调用 Vue.js 组件上的方法,但仅调用一次

Laravel + Vue $request->hasFile ('image' ) 返回 null

javascript - vue中可以用函数的返回来定义div的样式吗?

javascript - Async/Await 函数永远不会通过 Dispatch 解决

javascript - 根据其他元素调整高度

javascript - 进入react js时调用api响应

javascript - JS/React - 函数在完成前返回未定义