axios五種提交方法

<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>