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

本文链接：https://blog.youkuaiyun.com/H_c_l/article/details/104914792

本文提供了一个在Vue中利用Axios库优雅地进行API调用的完整示例，展示了如何处理加载状态、错误情况及数据展示。通过获取实时比特币价格指数，演示了异步请求的最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>