使用 Axios 消费 API

基本示例

在为 Web 构建应用程序时，您可能希望消费和显示来自 API 的数据。有很多方法可以做到这一点，但一种非常流行的方法是使用 axios，一个基于 Promise 的 HTTP 客户端。

在本练习中，我们将使用 CoinDesk API 来逐步展示比特币价格，每分钟更新一次。首先，我们将使用 npm/yarn 或通过 CDN 链接安装 axios。

我们可以通过多种方式从 API 请求信息，但最好先了解数据的形状，以便知道要显示什么。为此，我们将调用 API 端点并输出它，以便我们可以看到它。在 CoinDesk API 文档中，我们可以看到此调用将被发送到 https://api.coindesk.com/v1/bpi/currentprice.json。因此，首先，我们将创建一个数据属性，它最终将容纳我们的信息，我们将使用 mounted 生命周期钩子检索数据并将其赋值。

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
  }
})

<div id="app">
  {{ info }}
</div>

我们得到的结果是：

查看 CodePen 上 Vue 的第一步 Axios 和 Vue。

太好了！我们得到了一些数据。但现在看起来很乱，所以让我们正确地显示它，并在出现问题或获取信息所需时间过长时添加一些错误处理。

真实世界示例：使用数据

从 API 显示数据

通常情况下，我们需要的信息位于响应中，我们需要遍历我们刚刚存储的内容才能正确访问它。在我们的例子中，我们可以看到我们需要的价格信息位于 response.data.bpi 中。如果我们使用它，我们的输出如下所示：

axios
  .get('https://api.coindesk.com/v1/bpi/currentprice.json')
  .then(response => (this.info = response.data.bpi))

查看 CodePen 上 Vue 的第二步 Axios 和 Vue。

这对于我们来说更容易显示，因此我们现在可以更新我们的 HTML，以仅显示我们从接收到的数据中需要的信息，并且我们将创建一个过滤器来确保小数点位于正确的位置。

<div id="app">
  <h1>Bitcoin Price Index</h1>
  <div
    v-for="currency in info"
    class="currency"
  >
    {{ currency.description }}:
    <span class="lighten">
      <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
    </span>
  </div>
</div>

filters: {
  currencydecimal (value) {
    return value.toFixed(2)
  }
},

查看 CodePen 上 Vue 的第三步 Axios 和 Vue。

处理错误

有时我们可能无法从 API 获取所需的数据。我们的 axios 调用可能会失败的原因有很多，包括但不限于：

API 宕机。
请求错误。
API 没有以我们预期的方式提供信息。

在进行此请求时，我们应该检查这些情况，并在每种情况下提供信息，以便我们知道如何处理问题。在 axios 调用中，我们将使用 catch 来做到这一点。

axios
  .get('https://api.coindesk.com/v1/bpi/currentprice.json')
  .then(response => (this.info = response.data.bpi))
  .catch(error => console.log(error))

这将让我们知道 API 请求期间是否发生了错误，但如果数据被破坏或 API 宕机怎么办？现在用户什么也看不到。我们可能希望为此情况构建一个加载器，然后在无法获取数据时告诉用户。

new Vue({
  el: '#app',
  data () {
    return {
      info: null,
      loading: true,
      errored: false
    }
  },
  filters: {
    currencydecimal (value) {
      return value.toFixed(2)
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => {
        this.info = response.data.bpi
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)
  }
})

<div id="app">
  <h1>Bitcoin Price Index</h1>

  <section v-if="errored">
    <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
  </section>

  <section v-else>
    <div v-if="loading">Loading...</div>

    <div
      v-else
      v-for="currency in info"
      class="currency"
    >
      {{ currency.description }}:
      <span class="lighten">
        <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
      </span>
    </div>

  </section>
</div>

您可以点击此 CodePen 上的重新运行按钮，以在从 API 收集数据时短暂地查看加载状态。

查看 CodePen 上 Vue 的第四步 Axios 和 Vue。

这可以通过使用不同部分的组件以及更明确的错误报告来进一步改进，具体取决于您使用的 API 和应用程序的复杂性。

其他模式

Fetch API

Fetch API 是一个功能强大的原生 API，用于这些类型的请求。您可能听说过 Fetch API 的一个优点是，您不需要加载外部资源即可使用它，这是真的！除了……它还没有完全支持，因此您仍然需要使用 polyfill。在使用此 API 时，也有一些需要注意的地方，这就是为什么许多人现在更喜欢使用 axios 的原因。不过，这在将来可能会发生改变。

如果您有兴趣使用 Fetch API，有一些非常好的文章解释了如何做到这一点。

总结

除了消费和显示 API，还有很多方法可以将 Vue 和 axios 结合使用。您还可以与无服务器函数通信，从您拥有写入权限的 API 中发布/编辑/删除数据，以及许多其他好处。由于这两个库的直接集成，它已成为需要将 HTTP 客户端集成到其工作流程中的开发人员的非常常见的选择。

菜谱beta