欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue中axios的简单使用

程序员文章站 2022-07-02 16:54:27
...

1,本文是对axios的简单使用,并没有对axios进行封装
首先在vue项目安装axios,如下代码

npm install axios --save

2,直接使用axios

在axios请求之前:如下图所示。
vue中axios的简单使用
在axios请求之后,得到数据,如下图所示。
vue中axios的简单使用
代码如下:

<template>
    <div>
        <input type="button" value="axiosTest" @click="getAxiosData"/>
        <br>
        <div>
            {{info}}
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "axiosTest",
        data(){
            return {
                info : {}
            }
        },
        methods:{
            getAxiosData(){
                axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
                    .then(response => {
                            this.info = response.data;
                            console.log(response)
                            console.log("info==",this.info)
                    })
            }
        }

    }
</script>

<style scoped>

</style>