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）的更多相关文章

  1. Vue 中怎么发起请求（二）

    fetch 是新一代XMLHttpRequest的一种替代方案.无需安装其他库.可以在浏览器中直接提供其提供的api轻松与后台进行数据交互. 基本用法: 1 fetch(url,{parmas}).t ...

  2. 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 ...

  3. Vue中发送ajax请求——axios使用详解

    axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 htt ...

  4. Vue 中使用Ajax请求

    Vue 项目中常用的 2 个 ajax 库 (一)vue-resource vue 插件, 非官方库,vue1.x 使用广泛 vue-resource 的使用 在线文档   https://githu ...

  5. vue 中promise 异步请求数据

    export function getTypes(type) { return listDictItems({ code: type }).then((res) => { if (res.cod ...

  6. Vue中图片的加载方式

    一.前言 VUE项目中图片的加载是必须的,那么vue中图片的加载方式有哪些呢,今天博主就抽点时间来为大家大概地捋一捋. 二.图片的加载方法 1.在本地加载图片(静态加载) 图片存放assets文件夹中 ...

  7. Vue.js Cookbook: 添加实例属性; 👍 axios（4万➕✨）访问API; filters过滤器;

    add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...

  8. 解决在vue中axios请求超时的问题

    查看更多精彩内容请访问我的新博客:https://www.cssge.com/ 自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们 ...

  9. vue（6）—— vue中向后端异步请求

    异步请求 其实什么是异步请求已经不用多说了,通俗的说,就是整个页面不会刷新,需要更新的部分数据做局部刷新,其他数据不变. 学到这里,你应该用过jquery里的ajax了,所以很能理解了,不多说了.详细 ...

随机推荐

  1. VC用MCI播放mp3等音乐文件

    VC播放mp3等音乐文件,可以使用MCI.MCI ( Media Control Interface ) ,即媒体控制接口,向基于Windows操作系统的应用程序提供了高层次的控制媒体设备接口的能力. ...

  2. 每天一个linux命令（13）：more命令

    版权声明更新:2017-05-17博主:LuckyAlan联系:liuwenvip163@163.com声明:吃水不忘挖井人,转载请注明出处! 1 文章介绍 本文介绍了Linux下面的mv命令. 2. ...

  3. ACM学习历程—FZU2195 检查站点（树形DP || 贪心）

    Description 在山上一共有N个站点需要检查,检查员从山顶出发去各个站点进行检查,各个站点间有且仅有一条通路,检查员下山前往站点时比较轻松,而上山时却需要额外的时间,问最后检查员检查完所有站点 ...

  4. POJ 1503 Integer Inquiry(大数相加)

    一.Description One of the first users of BIT's new supercomputer was Chip Diller. He extended his exp ...

  5. HDOJ1242(延时迷宫BFS+优先队列)

    Rescue Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  6. shock编程

    Socket接口是TCP/IP网络的API,Socket接口定义了许多函数或例程,程序员可以用它们来开发TCP/IP网络上的应用程序.要学Internet上的TCP/IP网络编程,必须理解Socket ...

  7. phpMailer在CentOS 6.5下无法发送邮件的解决办法

    作者:ffsystem 网站在Windows平台上开发测试,完成了后同步到CentOS6.5 Nigix运行.发现phpMailer组件无法与SMTP服务器建立连接,导致无法发送邮件. 错误代码: p ...

  8. ArrayList,Vector, LinkedList的存储性能和特性

    ArrayList和Vector都是使用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,它们都允许直接按序号索引元素,但是插入元素要涉及数组元素移动等内存操作,所以索引数据快而插入 ...

  9. 实现oracle分页---3种方法--

    oracle的分页一共有三种方式 方法一 根据rowid来分 SELECT * FROM EMP WHERE ROWID IN (SELECT RID FROM (SELECT ROWNUM RN, ...

  10. VisualGDB系列5：使用VS来开发Linux程序

    根据VisualGDB官网(https://visualgdb.com)的帮助文档大致翻译而成.主要是作为个人学习记录.有错误的地方,Robin欢迎大家指正. 本文演示如何使用VS来构建和调试Linu ...