vue-axios中post和get携带参数和token

最新推荐文章于 2025-05-28 11:41:52 发布

zLinks

最新推荐文章于 2025-05-28 11:41:52 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前后端交互文章标签： vue axios

原文链接：https://www.cnblogs.com/6909ye/p/10684268.html

前后端交互专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了HTTP请求中的GET与POST方法，详细解释了如何使用这两种方法进行数据交互，包括携带参数、处理响应及错误情况。通过具体代码示例，展示了如何在前端应用中实现数据的获取和提交。

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

get请求携带id删除某一项

this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsigns/delete?id=$ {id}`,　　　　　　　　//利用了字符串模板来携带id
headers:{
‘token’:window.localStorage.getItem(‘token’)　　　　//由于是多页面应用所以token存储在本地localStorage中
}
},

).then(res=>{
console.log(res)
this.inlist()
}).catch(req=>{
console.log(req)
})

this.$axios.get(url,{
　　headers:{
　　token:******,
},
params:{　　　　//携带的数据
　　　　 param1: string,
　　　　 param2: string
}

}).then(res=>{})
.catch(req=>{})

post请求
this.$axios.post(’/scihua/webapp/userorder/preCreateOrder’,{
“count”: this.count, //数目默认1
“fileSelectKey”: this.fileSelectKey, //选择下载文件的规格格式_dpi
“fileType”: this.fileType, //下载的文件类用到的格式属性
“height”: this.height, //高度
“orderSn”: this.geturl(‘orderSn’), //订单id
“orderType”: “prodFile”, //订单类型
“payType”: “wxpay”, //支付方式 alipay wxpay
“resolution”: this.resolution, //下载的文件类用到的分辨率
“width”: this.width //宽度
},{
headers:{
‘token’:window.localStorage.getItem(‘token’)　　　　//也是在本地中拿到token
}
}).then(res=>{
console.log(res)
if (res.data.code500){
this.msg=res.data.msg　　　　　　　　　　　　　　　　//后台返回code500时候我们将错误回馈到页面上
this.ish1=true
}else {
this.isshow=true
this.value=res.data.code_url
}

}).catch(req=>{
console.log(req)
this.ish1=true
})
另外一种请求方式就是
data:{　　　　　　　　　　　　//在data中创建对象，然后我们post请求中携带过去
wx:{
openid:null,
headimgurl:null,
nickname:null,
unionid:null,
phone:null,
password:null
}
}

this.$axios.post(’/scihua/webapp/login/bindingExistUser’,this.wx)
.then( res=> {
if(res.data.msg == ‘success’){

    window.localStorage.setItem('token',res.data.token)
    setTimeout(()=>{
    window.location.href='file.html'
    },300)
}else{

    this.warning(res.data.msg)
}

}).catch( req=> {
console.log(req)
})