vue中比较完美请求的栗子(使用 axios 访问 API)

官网地址:https://vuejs.bootcss.com/v2/cookbook/using-axios-to-consume-apis.html

实例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  9. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  10. <title>Document</title>
  11. </head>
  12.  
  13. <body>
  14. <div id="app">
  15. <h1>Bitcoin Price Index</h1>
  16.  
  17. <section v-if="errored">
  18. <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
  19. </section>
  20.  
  21. <section v-else>
  22. <div v-if="loading">Loading...</div>
  23.  
  24. <div v-else v-for="currency in info" class="currency">
  25. {{ currency.description }}:
  26. <span class="lighten">
  27. <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
  28. </span>
  29. </div>
  30.  
  31. </section>
  32. </div>
  33. <script>
  34. new Vue({
  35. el: '#app',
  36. data() {
  37. return {
  38. info: null,
  39. loading: true,
  40. errored: false
  41. }
  42. },
  43. filters: {
  44. currencydecimal(value) {
  45. return value.toFixed(2)
  46. }
  47. },
  48. mounted() {
  49. axios
  50. .get('https://api.coindesk.com/v1/bpi/currentprice.json')
  51. .then(response => {
  52. this.info = response.data.bpi
  53. })
  54. .catch(error => {
  55. console.log(error)
  56. this.errored = true
  57. })
  58. .finally(() => this.loading = false)
  59. }
  60. })
  61. </script>
  62.  
  63. </body>
  64.  
  65. </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. 倍增模板orz

    #include<iostream> #include<cstdio> #include<cstdlib> #include<algorithm> #i ...

  2. ACM学习历程——ZOJ 3822 Domination (2014牡丹江区域赛 D题)(概率,数学递推)

    Description Edward is the headmaster of Marjar University. He is enthusiastic about chess and often ...

  3. #define与typedef区别

    1) #define是预处理指令,在编译预处理时进行简单的替换,不作正确性检查,不关含义是否正确照样带入,只有在编译已被展开的源程序时才会发现可能的错误并报错.例如: #define PI 3.141 ...

  4. JS上传图片-通过FileReader获取图片的base64

    下面文章,我想要的是: FileReader这个对象,可以借助FileReader来获取上传图片的base64,就可以在客户端显示该图片了.同时,还可以把该图片的base64发送到服务端,保存起来. ...

  5. Java常见设计模式之观察者模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述观察者(Observer)模式的: 观察者模式是对象的行为模式,又叫发布-订阅(Publish/Subscribe)模式.模型-视图(Mo ...

  6. React 特别需要注意的地方

    如图:

  7. iOS使用VideoToolbox硬编码录制H264视频

    http://blog.csdn.net/shawnkong/article/details/52045894

  8. Bluetooth Functions

    The functions in this section are used for managing Bluetooth devices and services. Bluetooth is als ...

  9. JConsole远程监控配置

    首先,看本机(Windows)安装了JRE没 Win > CMD 打开命令窗口 如有安装,则会显示以下版本信息:若没有显示,就安装吧 C:\Users\Administrator>java ...

  10. [hdu2159]FATE二维多重背包(背包九讲练习)

    解题关键:二维约束条件,只需加一维状态即可. 转移方程:$f[j][k] = \max (f[j][k],f[j - w[i]][k - 1] + v[i])$ #include<bits/st ...