使用Axios＆amp ;;查询其他API端点从不同的端点获取结果后的Vue

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();
    }
});

这会带来以下数据结构：

在每个灯具内部，您会得到一个_links数组，您可以在下面的屏幕截图中看到：

现在，我想做的是查询awayTeam api和homeTeam api，因为它们每个都有crestUrl的端点，它返回国家/地区的标志。

你可以在我的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请求返回到团队网址的承诺[[getAwayTeamInfo, getHomeTeamInfo], [getAwayTeamInfo, getHomeTeamInfo], [getAwayTeamInfo, getHomeTeamInfo],...]
• 我们循环使用此等待承诺获取crestUrl

• 此crestUrl作为对象推送到flags数组

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

更新

将标记网址直接添加到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
    });
  });
}