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. Nginx-rtmp模块实现流媒体play、push、pull功能

    官方wiki:https://github.com/arut/nginx-rtmp-module#readme Nginx rtmp 功能特点 1.   支持音视频直播 2.   支持flv/mp4视 ...

  2. LOJ2302 「NOI2017」整数

    「NOI2017」整数 题目背景 在人类智慧的山巅,有着一台字长为$1048576$位(此数字与解题无关)的超级计算机,著名理论计算机科 学家P博士正用它进行各种研究.不幸的是,这天台风切断了电力系统 ...

  3. 【QT】对Qt项目开发中遇到的问题的总结

    1. QMessageBox中文乱码 这里的中文乱码是指只有QMessageBox才出现中文乱码,其他都可以正常使用的情况.有些博客中提到使用QString::fromUtf8()函数, 实测有些情况 ...

  4. 【Lintcode】364.Trapping Rain Water II

    题目: Given n x m non-negative integers representing an elevation map 2d where the area of each cell i ...

  5. http之pragma

    关于Pragma:no-cache,跟Cache-Control: no-cache相同.Pragma: no-cache兼容http 1.0 ,Cache-Control: no-cache是htt ...

  6. 查看，检查，修复pg的命令

    标签(空格分隔): ceph,ceph运维,pg 如果集群状态是HEALTH_ERR 并且有pgs inconsistent,需要进行如下操作: 1. 通过下面的命令查看哪些pg状态不一致: # ce ...

  7. 如何在Windows平台使用VS搭建C++/Lua的开发环境

    转自:http://ju.outofmemory.cn/entry/95358 本文主要介绍如何在Windows平台利用VS搭建C++/Lua开发环境.这里的“C++/Lua开发环境”主要指的是C++ ...

  8. 问题：HttpWebRequest request post 传参； 结果：好用的C# HttpWebRequest用Post同时提交参数和文件的封装类

    在项目中,本来都是在站内进行数据交互的,后来又加进来一个买的php网站(艹).需要进行数据交互,在没有考虑使用web服务的情况下,只有通过Post提交到页面进行数据交互是最好的方式了. 我这边使用的是 ...

  9. web实现本地缓存的方法

    Cookie(或者Cookies) 指一般网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密). cookie一般通过http请求中在头部一起发送到服务器端.一条c ...

  10. 如何更新node和npm版本

    更新npm --->  npm undate -g 更新node --->  npm install -g -n n latest