广州建设工程造价管理站网站,黑龙江建设网安管人员管理系统,网页制作的公司排名,学校建设评建工作网站Vue 不像 jQuery 内置了 ajax 请求函数#xff0c;在 Vue 中没有提供这样的功能。所以当我们需要在 Vue 中和服务端进行通信的时候可选择的方式会更灵活一些。 所以 Vue 给了我们更多的选择空间#xff0c;例如我们可以使用下面的可选方案#xff1a;
原生的 XMLHttpReques…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 idapp{{ 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 idapph1Bitcoin Price Index/h1divv-forcurrency in infoclasscurrency{{ currency.description }}:span classlightenspan v-htmlcurrency.symbol/span{{ currency.rate_float | currencydecimal }}/span/div
/divfilters: {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 idapph1Bitcoin Price Index/h1section v-iferroredpWere sorry, were not able to retrieve this information at the moment, please try back later/p/sectionsection v-elsediv v-ifloadingLoading.../divdivv-elsev-forcurrency in infoclasscurrency{{ currency.description }}:span classlightenspan v-htmlcurrency.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 多一些。当然这个事情在未来可能会发生改变。
4、总结
其实 Vue 和 axios 可以在一起配合的事情不只是访问和展示一个 API。你也可以和 Serverless Function 通信向一个有写权限的 API 发送发布/编辑/删除请求等等。由于这两个库的集成很简单直接它便成为了需要在工作流中集成 HTTP 客户端的开发者的常见选择。
