在vue中使用 axios 访问 API

Vue 不像 jQuery 内置了 ajax 请求函数，在 Vue 中没有提供这样的功能。所以当我们需要在 Vue 中和服务端进行通信的时候可选择的方式会更灵活一些。
所以 Vue 给了我们更多的选择空间，例如我们可以使用下面的可选方案：

原生的 XMLHttpRequest
原生的 Fetch
也可以结合使用 jQuery 自带的 Ajax 请求函数
早期大家开发 Vue 应用喜欢使用一个第三方插件：Vue Resource
目前主流的方案是使用社区中知名的第三方库 axios

1、基本的示例

多时候你在构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种，而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种。

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

我们有很多种方式可以从 API 请求信息，但是最好首先确认这些数据看起来长什么样，以便进一步确定如何展示它。为此，我们会调用一次这个 API 并输出结果，以便我们能够看清楚它。如 CoinDesk 的 API 文档所述，请求会发送到 https://api.coindesk.com/v1/bpi/currentprice.json。所以，我们首先创建一个 data 里的属性以最终放置信息，然后将会在 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 (@Vue)的 axios 和 Vue：第一步。

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

2、真实示例：和数据协同工作

从一个 API 展示数据

通常情况下，我们需要的信息已经包含在了响应中，只需要遍历我们保存下来的内容就能正确地获取。在这个例子中，我们可以看到我们需要的价格信息在 response.data.bpi 中。如果我们换用这个，则输出是下面这样的：

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

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

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

<div id="app"><h1>Bitcoin Price Index</h1><divv-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 (@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><divv-elsev-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>

你可以在下面的例子中点击 Rerun 按钮以便看到我们从 API 获取数据时的加载状态：

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

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

3、替代方案

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