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. Gym - 100801D：Distribution in Metagonia （数学）

    题意:给定一个N,让你把它拆成若干个只含素因子2和3的数之和,且两两之间没有倍数关系,比如10=4+6. 思路:即是2因子的幂递增,3因子的幂递减:或者反之. 对于当前N,我们拆分出的数为num=2^ ...

  2. Cannot find PHPUnit in include path (.;C:\php5\pear)

    --pear channel-discover pear.phpunit.de --pear install phpunit/PHPUnit 此时会显示: No valid packages foun ...

  3. 卸载DCOS

    再次安装,已经是隔了两天,我打算换一台机器作为boot机器,但是发现报错,告知部署设备已经安装了dcos:看来需要卸载:uninstall-master.sh /opt/mesosphere/bin/ ...

  4. asp.net分页asp.net无刷新分页高效率分页

    项目中经常会用到分页的功能类似的项目做过无数个了,今个把自己常用的分页代码分享一下. 首先说说服务端处理的代码: 下面代码中重点是分页的sql语句的写法,其中的参数@n是当前的页码,总的来说本服务端主 ...

  5. Python：extend和append的用法

    转于:https://www.cnblogs.com/subic/p/6553187.html 博主:subic 1)list.append(object) 向列表中添加一个对象object2)lis ...

  6. 【转】 Pro Android学习笔记（二二）：用户界面和控制（10）：自定义Adapter

    目录(?)[-] 设计Adapter的布局 代码部分 Activity的代码 MyAdapter的代码数据源和构造函数 MyAdapter的代码实现自定义的adapter MyAdapter的代码继续 ...

  7. Ruby 事务Blocks

    block可以用来定义必须运行在事务控制环境下的代码.例如,你经常需要打开一个文件,对其内容做些处理,然后确保在处理结束后关闭文件.尽管可以用传统方式来实现,但也存在“应该由文件负责自身的关闭”这样的 ...

  8. ES6学习之正则扩展

    RegExp正则函数 var reg = new RegExp("abc","igm"); //等价于 var reg = new RegExp(/abc/ig ...

  9. struts2 ajax jquery返回json类型

    三个页面, <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC & ...

  10. [413D][搜索]D - Field expansion

    http://codeforces.com/contest/799/problem/D 解题关键:因为3^11>100000,所以若只把2单独拿出,最多只需要暴力2^11次,故只需要dfs一下即 ...