axios在vue中几种请求方式的应用

axios在vue中几种请求方式的应用

 

1.get请求的两种不同的写法

      //写法1：

      //http://localhost:8080/data.json?id=12

      axios.get('/data.json',{

        params:{

          id:12

        }

      }).then((res)=>{

        console.log(res)

      })

 

      //写法2：

      //http://localhost:8080/data.json?id=12

      axios({

        method:'get',

        url:'/data.json',

        params:{

          id:12

        }

      }).then((res)=>{

        console.log(res)

      })

2.post请求的两种不同的写法（put/patch类似）

post请求有三个参数：路由、数据、配置

 //第一种：form-data 表单提交(图片上传，文件上传)

        let formdata = new FormData()

        for(let key in data){

          formdata.append(key,data[key])

        }

        axios.post('/post',formdata).then

        (res=>{

          console.log(res)

        })

      //第二种: applicition/json

      let data={

        id : 12

      }

      axios.post('/post',data).then

      (re=>{

        console.log(res)

      })

 

      axios({

        method:'post',

        url:'/post',

        data:data

      }).then((res)=>{

        console.log(res)

      })delete

3.delete请求

    //方式1：delete 删除请求

    axios.delete('/delete',{

      params:{ //在url中传入参数，在浏览器中展示的请求方式是：Query String Parameters

        id:12

      }

    }).then(res=>{

      console.log(res)

    })

 

    //方式二：

    axios.delete('/delete',{

       data:{ //不在url中传入参数，在浏览器中展示：Request Payload

        id:12

      }

    }).then(res=>{

      console.log(res)

    })