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

    给定一个n个点m条边的图,每条边有黑白两色,求出恰好含need条白边的最小生成树 最小生成树...仿佛并没有什么dp的做法 大概还是个kruskal的板子再加点什么东西 考虑到“恰好含need条白边” ...

  2. Oracle中spool命令实现的两种方法比较

    ---恢复内容开始--- 要输出符合要求格式的数据文件只需在select时用字符连接来规范格式.比如有如下表 SQL>; select id,username,password from myu ...

  3. bzoj 2510: 弱题 概率期望dp+循环矩阵

    题目: Description 有M个球,一开始每个球均有一个初始标号,标号范围为1-N且为整数,标号为i的球有ai个,并保证Σai = M. 每次操作等概率取出一个球(即取出每个球的概率均为1/M) ...

  4. P1330 封锁阳光大学（二分图染色）

    题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构成的无向图,N个点之间由M ...

  5. GCC泛型宏

    在JAVA和CPP这种OOP语言中,都有泛型类,在C语言可以用宏定义实现泛型函数. main.c #include <stdio.h> #define min(x, y) ({ \ typ ...

  6. bzoj 1001 狼抓兔子 —— 平面图最小割(最短路)

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1001 平面图最小割可以转化成最短路问题: 建图时看清楚题目的 input ... 代码如下: ...

  7. Log4Net日志记录介绍

    原文地址 : http://www.cnblogs.com/wolf-sun/p/3347373.html#3009010 简介 log4net库是Apache log4j框架在Microsoft . ...

  8. linux下go的动态链接库的使用

    转自:http://blog.csdn.net/xtxy/article/details/21328143 在使用lua进行服务器端游戏逻辑开发时,发现了LUA的各种不方便的地方,不能编译检查,不能断 ...

  9. ng2-升级脚手架到最新版本

    //先卸载,后安装 npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest

  10. .net wcf调用java的需要认证的接口

    1.wcf直接添加java的webservice地址,这都是常规操作,没必要好说 2.修改config配置文件,添加headers消息头节点,这个需要注意 3.OK直接调用里面的方法即可,全部搞定 & ...