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了,所以很能理解了,不多说了.详细 ...
随机推荐
- Access中复制表
很多时候在Access中需要复制表,或只复制结构,源表名:a: 新表名:b (经测试中Access可用) 法一:select * into b from a where 1<>1 ...
- ssh免密码登录配置方法，（图示加命令）
首先,说明一下我们要做的是,serverA 服务器的 usera 用户免密码登录 serverB 服务器的 userb用户. 我们先使用usera 登录 serverA 服务器 [root@serve ...
- node.js的国内源
node.js在使用npm安装包是,由于源是国外的,有可能会被GFW屏蔽. 通过下面的方法可以把源指向国内的. 具体方法如下: 编辑 ~/.npmrc 加入下面内容 registry = http:/ ...
- POJ1001(C++处理大数)
Exponentiation Time Limit: 500MS Memory Limit: 10000K Total Submissions: 158025 Accepted: 38470 ...
- 杂项：TModJS
ylbtech-杂项:TModJS TmodJS(原名 atc)是一个简单易用的前端模板预编译工具.它通过预编译技术让前端模板突破浏览器限制,实现后端模板一样的同步“文件”加载能力.它采用目录来组织维 ...
- DCloud-MUI：Hello MUI2
ylbtech-DCloud: 1. <head> <meta charset="utf-8"> <title>Hello MUI</ti ...
- SQL Server BCP 资料导入导出
SQL Server BCP 导入导出使用 Bcp 导出导入数据高效,比使用SQL Server Management Stdio 提供的数据库导出导入要高效因为sql server 也没有提供提供类 ...
- jquery 键盘事件的使用方法详解
转自:https://www.jb51.net/article/123579.htm jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: jquery 代码: 1. keydown(); ...
- MongoDB一些基本的命令
Win+R进入Dos命令窗口,输入cmd,进入MongoDB exe文件的所在目录,比如我的在E:\MongoDB\bin,分别执行:“E:”回车,然后:"cd mongodb/bin&qu ...
- com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; che
出现此种错误,我暂时遇到了两次. 1 我的字段的名称和数据库的关键字重合. 上图中的desc是默认降序排列的意思. 2 第二次出现的异常是我在重构代码阶段遇到的一个bug.不过我暂时不能理解,虽然解决 ...