Vue框架型获取数据的两种常用方式axios/fetch

最新推荐文章于 2024-06-16 11:09:11 发布

雾里种花

最新推荐文章于 2024-06-16 11:09:11 发布

阅读量728

点赞数 1

文章标签： get post vue的数据请求 vue请求数据常用的方式

本文链接：https://blog.csdn.net/ThisOnly/article/details/93232796

版权

第一种：axios

1.获取模拟假数据（mock-json）----get获取

//先引入axios和V的cdn或是安装对应的模块
//https://www.bootcdn.cn/
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>

//写一个json文件，等下要在配置项中写这个文件的路径
{
   
    "id": 1,
    "name": "小明"
}

//模板
<body>
    <div id="app">
        <button @click = "getData"> 获取mock数据 </button>
    </div>
</body>
<script>
    new Vue({
   
        el: '#app',
        methods: {
   
            getData () {
   
                axios({
   
                    url: './data/data.json',//上面那个json文件
                   method: 'get'
                })
                .then( res => console.log( res ))
                .catch( error => console.log( error ))
            }
        }
    })
</script>

2.获取后端api(php文件)----get获取

//引入axios和Vue.js的cdn或是安装对应的模块
//https://www.bootcdn.cn/

<body>
    <div id="app">
        <button @click = "getPhp"> 获取后端api </button>
    </div>
</body

最低0.47元/天解锁文章

雾里种花

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue框架型获取数据的两种常用方式axios/fetch

第一种：axios1.获取模拟假数据（mock-json）----get获取//先引入axios和V的cdn或是安装对应的模块//https://www.bootcdn.cn/<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><script src="https://cdn.bo...
复制链接

扫一扫