vue中比较完美请求的栗子(使用 axios 访问 API)
vue中比较完美请求的栗子(使用 axios 访问 API)
官网地址:https://vuejs.bootcss.com/v2/cookbook/using-axios-to-consume-apis.html
实例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- <title>Document</title>
- </head>
- <body>
- <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>
- <script>
- 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)
- }
- })
- </script>
- </body>
- </html>
嘻嘻嘻嘻嘻:突然间发现自己曾经不懂的东西,多看看官网竟然都懂了。
vue中比较完美请求的栗子(使用 axios 访问 API)的更多相关文章
- Vue 中怎么发起请求(二)
fetch 是新一代XMLHttpRequest的一种替代方案.无需安装其他库.可以在浏览器中直接提供其提供的api轻松与后台进行数据交互. 基本用法: 1 fetch(url,{parmas}).t ...
- Vue 中怎么发起请求(一)
1.vue 支持开发者引入 jquery 使用 $.ajax() 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1.首先,在 package.json 中添加 j ...
- Vue中发送ajax请求——axios使用详解
axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 htt ...
- Vue 中使用Ajax请求
Vue 项目中常用的 2 个 ajax 库 (一)vue-resource vue 插件, 非官方库,vue1.x 使用广泛 vue-resource 的使用 在线文档 https://githu ...
- vue 中promise 异步请求数据
export function getTypes(type) { return listDictItems({ code: type }).then((res) => { if (res.cod ...
- Vue中图片的加载方式
一.前言 VUE项目中图片的加载是必须的,那么vue中图片的加载方式有哪些呢,今天博主就抽点时间来为大家大概地捋一捋. 二.图片的加载方法 1.在本地加载图片(静态加载) 图片存放assets文件夹中 ...
- Vue.js Cookbook: 添加实例属性; 👍 axios(4万➕✨)访问API; filters过滤器;
add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...
- 解决在vue中axios请求超时的问题
查看更多精彩内容请访问我的新博客:https://www.cssge.com/ 自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们 ...
- vue(6)—— vue中向后端异步请求
异步请求 其实什么是异步请求已经不用多说了,通俗的说,就是整个页面不会刷新,需要更新的部分数据做局部刷新,其他数据不变. 学到这里,你应该用过jquery里的ajax了,所以很能理解了,不多说了.详细 ...
随机推荐
- 倍增模板orz
#include<iostream> #include<cstdio> #include<cstdlib> #include<algorithm> #i ...
- ACM学习历程——ZOJ 3822 Domination (2014牡丹江区域赛 D题)(概率,数学递推)
Description Edward is the headmaster of Marjar University. He is enthusiastic about chess and often ...
- #define与typedef区别
1) #define是预处理指令,在编译预处理时进行简单的替换,不作正确性检查,不关含义是否正确照样带入,只有在编译已被展开的源程序时才会发现可能的错误并报错.例如: #define PI 3.141 ...
- JS上传图片-通过FileReader获取图片的base64
下面文章,我想要的是: FileReader这个对象,可以借助FileReader来获取上传图片的base64,就可以在客户端显示该图片了.同时,还可以把该图片的base64发送到服务端,保存起来. ...
- Java常见设计模式之观察者模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述观察者(Observer)模式的: 观察者模式是对象的行为模式,又叫发布-订阅(Publish/Subscribe)模式.模型-视图(Mo ...
- React 特别需要注意的地方
如图:
- iOS使用VideoToolbox硬编码录制H264视频
http://blog.csdn.net/shawnkong/article/details/52045894
- Bluetooth Functions
The functions in this section are used for managing Bluetooth devices and services. Bluetooth is als ...
- JConsole远程监控配置
首先,看本机(Windows)安装了JRE没 Win > CMD 打开命令窗口 如有安装,则会显示以下版本信息:若没有显示,就安装吧 C:\Users\Administrator>java ...
- [hdu2159]FATE二维多重背包(背包九讲练习)
解题关键:二维约束条件,只需加一维状态即可. 转移方程:$f[j][k] = \max (f[j][k],f[j - w[i]][k - 1] + v[i])$ #include<bits/st ...