vue axios数据请求get、post方法的使用

我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法

vue中使用axios方法我们先安装axios这个方法

npm install --save axios

安装之后采用按需引入的方法,哪个页面需要请求数据就在哪个页面里引入一下。

import axios from ‘axios’

引入之后我们就可以进行数据请求了,在methods中创建一个方法

 methods:{
  getInfo(){
         let url = "url"
         axios.get(url).then((res)=>{
             console.log(res)
         })      
     }  
 }

然后我们在mounted这个生命周期中进行调用

1 mounted(){
2     this.getInfo()  
3 }

这样就可以在控制台中查看数据,以上是一个简单的get方法数据请求,下面继续介绍一下post方法的使用,其实post和get的使用没有什么区别只是再加上一个参数就可以了,看一下我们的代码

 methods:{
     postInfo(){
         let url = "url"
         let params=new URLSearchParams();//这个方法在axios的官网中有介绍,除了这个方法还有qs这个方法
         params.append("key",index) 
         params.append("key",index)
         axios.post(url,params).then((res)=>{
             console.log(res)
        })
     }    
 }

同样在mounted这个生命周期中进行调用

 mounted(){
     this.postInfo()
 }</pre>

对前端技术感兴趣的同学,欢迎加入QQ群:838051760,不管你是小白还是大牛我都欢迎,还有我整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。

vueaxios库提供了很多对于发送HTTP请求方法,其中包括get和post请求。虽然它们在用法上有一些细微的区别,但它们都可以用来向服务器发送请求,获取响应数据。 首先,无论是get请求还是post请求,我们都需要引入axios库并创建一个axios实例。然后我们可以使用该实例来发送请求。不论是get请求还是post请求,我们都需要提供一个URL作为请求的目标地址。 在get请求中,我们可以将参数作为URL的一部分,参数可以通过params选项进行设置。例如,我们可以使用params选项传递一些查询参数。 ```javascript axios.get('/api/user', { params: { id: 1 } }).then(response => { console.log(response.data); }).catch(error => { console.error(error); }); ``` 在post请求中,我们需要使用data选项将要发送的数据传递给服务器。例如,我们可以使用data选项将一个JavaScript对象发送给服务器。 ```javascript axios.post('/api/user', { id: 1, name: 'John' }).then(response => { console.log(response.data); }).catch(error => { console.error(error); }); ``` 无论是get请求还是post请求,我们都可以使用then方法来处理成功的响应,并使用catch方法来处理错误的响应。 总的来说,对于vue中的axios库来说,get请求post请求在用法上是相似的。它们都需要一个URL作为请求的目标地址,并可以使用params或data选项来传递参数。区别主要在于get请求将参数作为URL的一部分,而post请求将参数放在请求体中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值