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. 【二叉查找树】04根据升序数组构造二叉查找树【Convert Sorted Array to Binary Search Tree】

    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 给定一个升序的数组,把他转换成一个 ...

  2. [原]NYOJ-开灯问题-77

    大学生程序代写 //http://acm.nyist.net/JudgeOnline/problem.php?pid=77 /*题目77题目信息运行结果本题排行讨论区开灯问题 时间限制:3000 ms ...

  3. bzoj 3171: [Tjoi2013]循环格 最小费用最大流

    题目大意: http://www.lydsy.com/JudgeOnline/problem.php?id=3171 题解: 首先我们很容易发现一个结论: 出现完美循环当且仅当所有点的出入度均为1 所 ...

  4. P1364 医院设置

    题目描述 设有一棵二叉树,如图: 其中,圈中的数字表示结点中居民的人口.圈边上数字表示结点编号,现在要求在某个结点上建立一个医院,使所有居民所走的路程之和为最小,同时约定,相邻接点之间的距离为l.如上 ...

  5. category extension

    1 category 分类,只能添加方法,添加的方法成为原来类的一部分,达到扩展类的目的,可以被子类继承 主要给没有源代码的类 添加方法,团队合作项目互不影响,不该动原有类的基础上添加方法 self ...

  6. 纯js+html+css实现模拟时钟

    前几天没事写的个模拟时钟,代码仅供小白参考,大神请自动绕过. <!DOCTYPE html> <html lang="en"> <head> & ...

  7. PG degraded实验

    1. 创建一个文件,并把该文件作为对象放到集群中: [root@node1 ~]# echo "this is test! " >>test.txt [root@nod ...

  8. Python模块-chardet模块

    chardet模块用来获取文件的编码 # -*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" import chardet f = o ...

  9. Selenium VS Webdriver

    Selenium 是 ThroughtWorks 一个强大的基于浏览器的开源自动化测试工具,它通常用来编写 Web 应用的自动化测试.随着 Selenium 团队发布 Selenium 2(又名 We ...

  10. C#设计模式(12)——享元模式

    一.概念 外观模式提供了一个统一的接口,用来访问子系统中的一群接口.外观定义了一个高层接口,让子系统更容易使用.使用外观模式时,我们创建了一个统一的类,用来包装子系统中一个或多个复杂的类,客户端可以直 ...