个人练习----Vue中使用axios请求数据【如有不对，欢迎指正】

本文链接：https://blog.youkuaiyun.com/sinat_42664398/article/details/90260441

本文介绍了在Vue项目中如何使用axios进行数据请求。首先，通过npm安装axios并将其保存到package.json文件。接着，在组件内部导入axios，以便在Vue应用中进行HTTP请求。

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

axios 在vue ，node 和 react 中都可以使用
1，安装 axios ( 官方的插件 )
cd 到项目的目录 npm install axios --save ( --save 是写入到package.json，如果不写是不会写入到 pachsge.json )
2，直接在组件中引入，因为axios是第三方模块， import Axios from ‘axios’;

<template>
    <!-- 所有的内容要被根节点包含 -->
    <div>
        <button @click="getData()">请求数据</button>
        <hr>
        <ul>
            <li v-for="(item, key) in list" :key="key">
                <p>{{ item.theme_id }}</p>
                <p>{{ item.screen_name }}</p>
                <p>{{ item.text }}</p>
                <p>{{ item.theme_name }}</p>
                <img :src="item.imgSrc" alt="">
            </li>
            <hr>
        </ul>
    </div>
</template>
<script>
    /* 
        vue请求数据的模板

        vue-resource

        axios

        fetch-jsonp
    */
    import Axios from 'axios'
    export default {
        data() {
            return {
                flag:false,
                imgSrc:'',
                list:[]
            }
        },
        methods: {
            getData(){
                var api = 'https://www.apiopen.top/satinApi?type=1&page=1'
                /* axios 请求数据 */
                Axios.get(api).then((res) => {
                    this.list = res.data.data;
                    for (let i = 0; i < this.list.length; i++) {
                        this.list[i].imgSrc = res.data.data[i].image0;
                        console.log(res.data.data[i].image0);
                        console.log(i);
                    }
                    console.log(res);
                }).catch((err) => {
                    console.log(err);
                })
            }
        },
        mounted() {
            this.getData();
        },
    }
</script>
<style>
</style>