Vue axios get&post请求方式

最新推荐文章于 2024-08-19 17:40:00 发布

太迪

最新推荐文章于 2024-08-19 17:40:00 发布

阅读量188

点赞数

本文链接：https://blog.csdn.net/qq_38990668/article/details/109383336

版权

本文展示了如何在Vue.js应用中使用Axios库进行GET和POST请求。对于GET请求，通过设置params参数获取指定类型的笑话数据，并在页面上展示。对于POST请求，利用qs.stringify()方法将数据转化为form-data格式，发送到指定URL并打印返回的数据。

摘要由CSDN通过智能技术生成

Vue axios get 请求

<template>
		<div>
				<ul>
        				<li v-for="news in newsData.jokes">{{news}}</li>
    			</ul>
		</div>
</template>
<script>
	export default {
	        name: "get",
	        data(){
	            return{
	                newsData:[]
	            }
	        },
	        methods:{
	        },
	        components:{
	        },
	        created() {
	            this.$axios.get("https://autumnfish.cn/api/joke/list",{
	                params:{ //传递参数
	                    type:"xiaohua",
	                    num:30
	                }
	            }).then(res => {
	                this.newsData = res.data  //添加到data创建的数组中，在html中使用v-for循环遍历
	                console.log(this.newsData)
	            }).catch(error => {
	                console.log(error)  //打印错误信息
	            })
	        }
	    }
    </script>

Vue axios post请求

form-data:?name=iwen&age20
x-www-form-urlencoded:{name:“iwen”,age:“20”}
注意：axios接受的post请求参数的格式是form-data格式需转化成form-data格式

<script>

  import qs from "qs" //引入qs
    export default {
        name: "anim",
        data(){
            return{
                newsData:[]
            }
        },
        methods:{
        },
        components:{
        },
        created() {
            this.$axios.post("https://httpbin.org/post",qs.stringify({ //使用qs.stringify(）方法将参数转换成form-data格式
                username:"666666@qq.com",
                password:"666"
            })).then(ress => {
                console.log(ress.data)
            }).catch(error => {
                console.log(error)
            })
        }
    }
</script>