vue 中如何使用axios调用接口

2019/11/28 15:48
阅读数 292

首先后端采用的是restful形式,分为了

1.post(添加)请求,

2.delect(删除)请求,

3.put(修改)请求,

4.get(查询)请求,

在vue里项目里,npm i axios -S,npm i vue-axios -S,下载这两个后,在main.js里面

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios) 
就可以在全局使用axios了
在需要的添加按钮里写一个方法,submit(){
先判断填写的内容是否符合格式标准,如果可以就执行
addpost()
}
//axios post 请求
addpost(){
  that = this //this就要换成that 防止this冲突
  this.$axios
  .post('url',{
  后台数据名:that.前台定义的变量,
  })
  .then(res =>{
  console.log(res)//提交后台的数据状态      res= {data: {…}, status: 200, statusText: "", headers: {…}, config: {…}, …}
  getlist(),添加完后再更新数据库的数据到页面
}
axios delect请求
delectlist(){
  this.$axios
  .delect(url/adate,{ //另一种方法传递参数用params选项传递参数
  params:{
  id:‘123’
  }
  })
  .then(res=>{
  console.log(res)
  })
}
axios get请求
getlist(){
  this.$axios.get(url/adate?id='123') //另一种方法传递参数用params选项传递参数
  .then(res=>{
  console.log(res)
  this.datearr = res.data.date//把数据赋给date里定义的dataarrr
  })
}
 
axios put请求与post类似都有表单格式
alterlist(){
  const  params =new URLsearchParams()
  params.append('param1','value');
  params.append('param1','value');
  this.$axios.put('url' ,params ).then(res = >{
  console.log(res) //修改的数据  
})
}
展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部