axios用法整合

axios的请求方法：get、post、put、patch、delete

get：一般用于获取数据

post：一般用于表单提交与文件上传

patch：更新数据（只将修改的数据推送到后端）

put：更新数据（所有数据推送到服务端）

delete：删除数据
备注：post一般用于新建数据，put一般用于更新数据，patch一般用于数据量较大的时候的数据更新。

get请求
完整写法(传入一个完整的对象)
axios({

url:'http://localhost:9999/student/getAllStudent',
method:'get'
})
.then(res=>{
console.log(res);})   //无参请求

复制代码
axios({

 url:'http://localhost:9999/student/getAllStudent'
 })
 .then(res=>{
     console.log(res);})    //不写method ,默认是get请求
 .catch(error=>{
     console.log(error);
     })

复制代码
axios({

 url:'http://localhost:9999/student/getAllStudent?id=1',
 method:'get'})
 .then(res=>
 console.log(res);)   //有参请求 参数拼接到URL中
 .catch(error=>{
     console.log(error);
     })

复制代码
axios({

 url:'http://localhost:9999/student/getAllStudent?id=1',
 method:'get',
 params:{    //有参请求 参数放到params中传递
 id:1 }
 })
 .then(res=>{
 console.log(res);
 })
 .catch(error=>{
     console.log(error);
     })

复制代码
简写
axios.get('/data.json') //不传参

.then(res=>{
console.log(res);
})
.catch(err=>
console.log(err);
});

复制代码
axios.get('/data.json',{

params:{  //记住这种传参方式
id:1
}
})
.then(res=>{
console.log(res);})
.catch(err=>{
console.log(err)})

复制代码
axios.get('/data.json?id=1')

.then(res=>{     //参数拼接到URL中
console.log(res)})
.catch(err=>{
console.log(err)})

复制代码
post请求(与put请求写法相似)
完整写法
axios({

method:'post',
url:'/user',
data:{               //data参数中进行传参
    name:'ff',
    qq:'222222222'
    }
})
.then(res=>{
console.log(res);})
.catch(err=>{
console.log(err)})

复制代码
简写
axios.post('/user',{ //传参

 name:'ff',
 qq:'222222222'
 })
.then(res=>{
console.log(res);})
.catch(err=>{
console.log(err)})

复制代码
其中 传递的参数可以有两种格式:form-data(图片上传,文件上传) 和 applicition/json（目前比较流行）
上面两种方法 都是 appliction/json格式　　
let formData = new FormData()
let data = {

id:1
}

for (let key in data){

formData.append(key,data[key])  //创建form-data格式数据

}

axios({

 method:'post',
 url:'/user',
 data:formData
 })
.then(res=>{
console.log(res);})
.catch(err=>{
console.log(err)})

复制代码
该请求发出之后可以在浏览器中查看此次请求的request header里面content-type: 为 form-data形式
delete请求(写法参考get)
完整写法
axios({

method:'delete',
url:'/user',
data:{
id:1
}
})
.then(res=>{
console.log(res);})
.catch(err=>{
console.log(err)})

复制代码
简写
axios.delete('/user',{

 params:{             //记住这种传参方式
id:1
}
  })
.then(res=>{
console.log(res);})
.catch(err=>{
console.log(err)})

复制代码
当然也可以直接在URL中拼接参数

作者：超宝最帅
链接：https://juejin.cn/post/7130816185351798791
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。