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>