从不同端点获取结果后，使用 Axios 和 Vue 查询其他 API 端点

Question

我将以下 API 用于世界杯 Laravel 应用程序 - http://api.football-data.org/docs/v1/index.html#_fixture

这些信息让我回到了今天的固定装置，因为我正在使用此代码（config 只是持有我的 API 密钥）：

const todaysMatches = new Vue({
    el: '#todaysMatches',
    data: {
        todaysMatches: [],
        flags: []
    },
    methods: {
        loadData: function () {
            axios.get("http://api.football-data.org/v1/competitions/467/fixtures/?timeFrame=p1", config)
            .then(response => {this.todaysMatches = response.data});
        }
    },
    mounted: function () {
        this.loadData();
    }
});

这带回了以下数据结构：

在每个 fixture 中你得到一个 _links 的数组，你可以在下面的截图中看到：

现在，我想做的是同时查询 awayTeam api 和 homeTeam api，因为它们每个都有一个端点 crestUrl，returns国旗。

你可以看到，在我的 data 中，我设置了一个名为 flags 的数组属性，所以我在考虑运行在我的 loadData 方法中进行额外的调用，并且为每个灯具填充该数组，但我认为这不是一种干净的方法。

任何人都可以建议解决此问题的最佳方法吗？

Answer 1

我已经使用 async/await 模式来实现您的要求，如下所示：

loadData: async function() {
  const response = await axios.get(
    "http://api.football-data.org/v1/competitions/467/fixtures/?timeFrame=p1",
    config
  );

  this.todaysMatches = response.data;

  let arr = this.todaysMatches.fixtures.map(fixture => {
    const _links = fixture._links;
    return [
      axios.get(_links.awayTeam.href, config),
      axios.get(_links.homeTeam.href, config)
    ];
  });

  arr.forEach(async item => {
    const away = await item[0];
    const home = await item[1];
    this.flags.push({
      awayFlag: away.data.crestUrl,
      homeFlag: home.data.crestUrl
    });
  });
}

解释：

获取 todaysMatches 后，创建了一个新数组 arr，其中包含 get 请求返回给团队 url [[getAwayTeamInfo, getHomeTeamInfo], [getAwayTeamInfo, getHomeTeamInfo], [getAwayTeamInfo, getHomeTeamInfo],...]
我们遍历它并等待获得 crestUrl

这个crestUrl作为对象被推入flags数组

{
  awayFlag: away.data.crestUrl,
  homeFlag: home.data.crestUrl
}

更新

将标志 urls 直接添加到 this.todaysMatches.fixtures 数组

loadData: async function() {
  const response = await axios.get(
    "http://api.football-data.org/v1/competitions/467/fixtures/?timeFrame=p1",
    config
  );

  this.todaysMatches = response.data;
  const fixtures = this.todaysMatches.fixtures;

  let arr = fixtures.map(fixture => {
    const _links = fixture._links;
    return [
      axios.get(_links.awayTeam.href, config),
      axios.get(_links.homeTeam.href, config)
    ];
  });

  arr.forEach(async (item, index) => {
    const away = await item[0];
    const home = await item[1];
    this.$set(fixtures, index, {
      ...fixtures[index],
      awayFlag: away.data.crestUrl,
      homeFlag: home.data.crestUrl
    });
  });
}

从不同端点获取结果后，使用 Axios 和 Vue 查询其他 API 端点

Query additional API Endpoint with Axios & Vue after getting results from a different endpoint

laravel

vue.js

laravel-5

vuejs2

laravel-5.6

更新