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

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

官网地址:https://vuejs.bootcss.com/v2/cookbook/using-axios-to-consume-apis.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>Documenttitle>
head>

<body>
    <div id="app">
        <h1>Bitcoin Price Indexh1>

        <section v-if="errored">
            <p>We're sorry, we're not able to retrieve this information at the moment, please try back laterp>
        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>

你可能感兴趣的:(js)