vue 中如何使用axios调用接口

首先后端采用的是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) //修改的数据　　

})

}