axios五种提交方法

Posted 2022-12-26 harold-hua

<template>
  <div class="home">
    
  </div>
</template>

<script>
// @ is an alias to /src
/*
  get,post,put,patch,delete

  get：获取数据
  post：新建，提交数据（表单提交，文件上传）
  put：更新数据（所有数据推送到后端）
  patch：更新数据（只将修改的数据推送到后端）
  delete：删除数据
*/
import axios from ‘axios‘;

export default 
  name: ‘axios2-2‘,
  components: 
    
  ,
  created() 
    //get请求
    //http://127.0.0.1:8081/data.json?id=12
    axios.get(‘/data.json‘,
      params: 
        id: 12,
      
    ).then((res)=>
      console.log(res)
    )

    axios(
      method: ‘get‘,
      url: ‘/data.json‘,
      params: 
        id: 12,
      ,
    ).then(res=>
      console.log(res)
    )


    //post请求
    /*
      data
      form-data：表单提交（图片上传，文件上传）
      application/json：
    */
    let data = 
      id: 12,
    ;

    axios.post(‘/post‘, data).then(res => 
      console.log(res);
    );

    axios(
      method: ‘post‘,
      url: ‘/post‘,
      data: data,
    ).then(res => 
      console.log(res);
    );

    //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);
    );


    //put请求
    axios.put(‘/put‘, data).then(res => 
      console.log(res);
    )

    //patch请求
    axios.patch(‘/patch‘, data).then(res => 
      console.log(res);
    )

    //delete请求
    // axios.delete(url, config)

    //url传递参数(http://127.0.0.1:8080/delete?id=12)[Query String Parameters]
    axios.delete(‘/delete‘, 
      params:
        id: 12,
      
    ).then(res=>
      console.log(res)
    )

    //不是url传递参数(http://127.0.0.1:8080/delete)[Request Payload]
    axios.delete(‘/delete‘, 
      data:
        id: 12,
      
    ).then(res=>
      console.log(res)
    )


    axios(
      method: ‘delete‘,
      url: ‘/delete‘,
      // params: 
      //   id: 13,
      // 
      data: 
        id: 13,
      
    ).then(res=>
      console.log(res)
    )

  ,

</script>