vue中比较完美请求的栗子（使用 axios 访问 API）
生活随笔
收集整理的這篇文章主要介紹了
vue中比较完美请求的栗子（使用 axios 访问 API）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
vue中比較完美請求的栗子（使用 axios 訪問 API）
官網(wǎng)地址：https://vuejs.bootcss.com/v2/cookbook/using-axios-to-consume-apis.html
實(shí)例：
<!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>總結(jié)
以上是生活随笔為你收集整理的vue中比较完美请求的栗子（使用 axios 访问 API）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： uniapp时间戳转换
- 下一篇： html中使用js将axios请求封装