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了,所以很能理解了,不多说了.详细 ...
随机推荐
- px-rem自适应转换(进阶@rem:40rem; )
接力之前的文章 https://www.cnblogs.com/leshao/p/5674710.html 这篇文章讲解的是px -rem 单位换算 除100的 写法 比如实际测量PSD宽度是500 ...
- ACM学习历程—Hihocoder 1290 Demo Day（动态规划）
http://hihocoder.com/problemset/problem/1290 这题是这次微软笔试的第三题,过的人比第一题少一点,这题一眼看过去就是动态规划,不过转移方程貌似不是很简单,调试 ...
- webpack打包APP的后端地址处理
PC端我们用webpack打包,只需要写相对路径,发布的时候和后端接口在同一目录下即可. 但是做过APP或者混合开发的同学都知道,APP不需要发布的,如果后端地址还是用相对路径的话,可想而知,调用后端 ...
- POJ1365:质因数分解
Prime Land Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 3590 Accepted: 1623 Descri ...
- Linux负载均衡软件之LVS
一. LVS简介 LVS是Linux Virtual Server的简称,也就是Linux虚拟服务器, 是一个由章文嵩博士发起的自由软件项目,它的官方站点是linuxvirtualserver.org ...
- Java数组的基本讲解
由于Java数组涵盖的内容比较多,这里从个人的角度对主要的内容进行相关的讲解. 如有不足,欢迎批评指正~ 1)Java数组是动态还是静态的啊? Java语言是典型的静态语言,由此推断Java数 ...
- ES6学习之数值扩展
二进制和八进制表示法(二进制用前缀0b(或0B)表示,八进制用前缀0o(或0O)表示) Number('0b111') Number('0o10') Number.isFinite()(判断一个值是否 ...
- 服务器修改密码cmd
net user 账号 要修改的密码
- 【总结整理】JQuery小技巧
var item=$("#content").find(".item");//效率最高 var item=$("#content .item" ...
- 具体问题:3、hibernate跟Mybatis/ ibatis 的区别，为什么选择？
第一章 Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架,它出身于sf.net,现在已经成为Jboss的一部分. Mybatis 是另外一种优秀 ...