学习Axios笔记(1)

axios请求方法： get，post,put,patch,delete

get 获取数据
post 提交数据(表单提交+文件上传)
put 更新(所有数据推送到后端)
patch(只将修改的数据推送到后端)
delete: 删除数据

get方式请求

get方式的两种不同写法
way1:

 axios.get('/api'，{
     params:{
         id: 12
     }
 }).then((res)=>{
     console.log(res);
 })
 
way2:
 axios({
    method:'get',
    url:'/api',
    params:{
        id: 12
    }
 }).then((res)=>{
     console.log(res);
 })
    

post方式

一般提交内容分为两种方式

• form-data 表单提交(图片上传、文件上传)
• application/json 格式

application/json格式的post请求发送：

way1:
let data ={
    id:12
}
axios.post('/post',data).then((res)=>{
     console.log(res);
 })
 
 way2:
axios({
    method:'post',
    url:'/api',
    data: data,
 }).then((res)=>{
     console.log(res);
 })
 

form-data方式发送post请求

let formData = new FormData();
for(let key in data){
    formData.append(key,data[key]);
}
axios.post('/post',formData).then((res)=>{
     console.log(res);
 })

put方式和patch方式

axios.put('/put',data).then((res)=>{
 console.log(res);
})
 
 
axios.patch('/patch',data).then((res)=>{
 console.log(res);
})

delete方式

这里区分参数是放在url中 还是放在请求体里

id是包含在url中
axios.delete('/delete',{
    params:{
        id:12
    }
}).then((res)=>{
    console.log(res);
})
 
 id是放在请求体中的
axios.delete('/delete',{
    data:{
        id:12
    }   
}).then((res)=>{
    console.log(res);
})


axios({
    method:'delete',
    url:'/api',
    data: data, //参数放请求体中
 }).then((res)=>{
     console.log(res);
 })
 
 
 axios({
    method:'delete',
    url:'/api',
    params: params, //参数放url中
 }).then((res)=>{
     console.log(res);
 })

axios处理并发请求

请求多个接口数据

axios.all([
        axios.get('/data.json'),
        axios.get('/city.json')
    ]).then(axios.spread(result1,result2)=>{
        //业务逻辑处理
    })