Vue中使用axios分别实现post方式和get方式提交数据

Vue中使用axios分别实现post方式和get方式提交数据

1.安装axios

npm install --save axios

2.在main.js中引入并使用该模块,并设置域名(以后的请求都将基于该域名)

import axios from 'axios'

3.定义接口的基本路径（非必须），这个只是对一个项目里面的，如果所有接口均调用同一个域名下的不同接口的时候用着方便。

Vue.prototype.$http=axios.create({
 baseURL: 'https://www.baidu.com',
})

3.使用post提交数据并获取返回结果

this.$http.post("/login",{
  userName:'admin',
  password:'12356'
}).then(a => { // 接口调用正常的处理逻辑
    console.log("正确返回结果:" + a)
}).catch( e => { //接口调用失败的处理逻辑
    console.log("错误返回结果:" + e)
})

4.使用get提交数据并获取返回结果

//  同一IP下调用
this.$http.get("/user/getUserInfo",{
  params:{
    id:'0'
  }
}).then( a => {
    this.$message.success('查询成功')
}).catch(e => {
    this.$message.warnning('查询失败')
})

// 不同IP下调用
this.$http.get("http://127.0.0.1:8080/user/check?id=1024").then(a => {
    
}).catch(e => {
    
})

注意 这里用params 方式传参 地址栏内 不会显示参数 但是 实际上还是在 地址后面 拼接上了参数 他的地址是这样的：

http://127.0.0.1:8080/user/check?id=1024

而 当后端要求这样的传参： http://127.0.0.1:8080/user/check/{ id }

你需要这样做:

this.$http.get("http://127.0.0.1:8080/user/check" + '/' + id).then(a => {
    
}).catch(e => {
    
})

这样你拼接的地址就会是：

http://127.0.0.1:8080/user/check/1024

具体 params 和 query的用法 请查看 深入了解query和params的使用区别

喜欢前端的小伙伴 可以加一下下方的微信群哦 群内有前端大神在线答疑，时不时还有技术分享哦！

二维码过期 可以加群主好友 邀请入群哦

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HZDiICrM-1594116895925)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200707181404190.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fxCgd1st-1594116895927)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200707181238610.png)]