使用 axios 访问 API

    在本次实践中，我们会使用 来完成展示比特币价格且每分钟更新的工作。首先，我们要通过 npm/Yarn 或一个 CDN 链接安装 axios。

    我们有很多种方式可以从 API 请求信息，但是最好首先确认这些数据看起来长什么样，以便进一步确定如何展示它。为此，我们会调用一次这个 API 并输出结果，以便我们能够看清楚它。如 CoinDesk 的 API 文档所述，请求会发送到 。所以，我们首先创建一个 data 里的属性以最终放置信息，然后将会在 mounted 生命周期钩子中获取数据并赋值过去：

    1. <div id="app">
    2.   {{ info }}
    3. </div>

    我们得到的东西是这样的：

    在 CodePen 查看 Vue ()的 axios 和 Vue：第一步。

    很好！我们已经得到了一些数据。但是它看起来还比较乱，所以我们会更好的展示它并添加一些错误处理，以防出现异常情况或请求超时。

    在 查看 Vue (@Vue)的 。

    这让展示的工作变得容易了很多，所以我们可以更新 HTML 以从获取的数据中仅仅展示真正需要的信息。我们会创建一个过滤器来确保小数部分的合理展示。

    1. <div id="app">
    2.   <h1>Bitcoin Price Index</h1>
    3.   <div
    4.     v-for="currency in info"
    5.     class="currency"
    6.   >
    7.     <span class="lighten">
    8.       <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
    10.   </div>
    11. </div>

    在 查看 Vue (@Vue)的 。

    很多时候我们可能并没有从 API 获取想要的数据。这可能是由于很多种因素引起的，比如 axios 调用可能由于多种原因而失败，包括但不限于：

    • API 不工作了；
    • 请求发错了；
    • API 没有按我们预期的格式返回信息。当发送这个请求的时候，我们应该检查一下这些情况，并在所有情况下都返回相应的信息以便处理这些问题。在 axios 中，我们会通过使用 catch 来做这件事。
    1. axios
    2.   .get('https://api.coindesk.com/v1/bpi/currentprice.json')
    3.   .then(response => (this.info = response.data.bpi))
    4.   .catch(error => console.log(error))

    这样我们就会知道在请求 API 的过程中是否有地方出错了，不过当数据长时间生成不出来或 API 不工作的时候会怎样呢？现在用户将会什么都看不到。我们可能想为这种情况构建一个加载效果，然后在根本无法获取数据时通知用户。

    1. <div id="app">
    2.   <h1>Bitcoin Price Index</h1>
    4.   <section v-if="errored">
    5.   </section>
    8.     <div v-if="loading">Loading...</div>
    10.     <div
    11.       v-else
    12.       v-for="currency in info"
    13.       class="currency"
    14.     >
    15.       {{ currency.description }}:
    16.       <span class="lighten">
    17.         <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
    18.       </span>
    19.     </div>

    在 CodePen 查看 Vue ()的 axios 和 Vue：第四步。

    我们还可以做进一步优化，如用组件来实现不同部分、给出更明确的错误报告。这都取决于你使用的 API 以及应用的复杂度。

    是一个用于此类请求的强大的原生 API。你可能听说过 Fetch API 其中的一个好处，就是你不需要在使用它的时候额外加载一个外部资源。确实如此！但是……目前它还没有被浏览器完全支持，所以你仍然需要一个 polyfill。使用这个 API 还有很多别的注意事项，这也是为什么大家现阶段还是更喜欢 axios 多一些。当然这个事情在未来可能会发生改变。

    如果你对使用 Fetch API 有兴趣，这里有一些非常棒的文章来解释如何使用它。

    其实 Vue 和 axios 可以在一起配合的事情不只是访问和展示一个 API。你也可以和 Serverless Function 通信，向一个有写权限的 API 发送发布/编辑/删除请求等等。由于这两个库的集成很简单直接，它便成为了需要在工作流中集成 HTTP 客户端的开发者的常见选择。