vue axios 2 的5種請求方法 及 axios 的兩種寫法

vim demon01.vue

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

<script>
  /*
    axios請求方法：get,post,put,patch,delete

    get:   獲取數據
    post:  提交數據(表單提交，文件上傳)
    put:   更新數據(所有數據推送到后端)
    patch: 更新數據(只將修改的數據推送到后端)
    delete:刪除數據
  */
import axios from 'axios'
export default {
  name: 'demon01',
  components: {},
  created() {
    //定義變量時，該變量不被使用時也會報錯
    let url = "http://127.0.0.1:8001/super_cmdb/serverhost_list/"
    let my_data = {
      "parameter1":"chenjianwen01",
      "parameter2":"chenjianwen02",
      "parameter3":"chenjianwen03"
    }
    axios.get(url).then(res=>{
      console.log(res);
      console.log("1111111111111");
    })
    axios({
      method: 'get',  //請求方法
      url: url,  //請求url
      params: { //get 請求帶參數
        "id": 123456,
        "name": "陳建文"
      }
    }).then(res=>{
      let status = res.status;
      if (status==200){
        console.log(res);
        console.log("get請求成功，狀態碼200 ok")
      }else {
        console.log("get請求失敗，狀態碼:",status)
      }
    })

    //post
    //form-data 表單提交(圖片，文件上傳)
    //applicition.json
    axios({
      method: 'post',
      url: url,
      data: my_data
    }).then(res=>{
      let status = res.status;
      if (status==200){
        console.log(res);
        console.log("post請求成功，狀態碼200 ok")
      }else {
        console.log("post請求失敗，狀態碼:",status)
      }
    })
    //form-data請求
    let formData = new FormData()
    for(let key in my_data){
      formData.append(key,my_data[key])
    }
    axios.post(url,formData).then(res=>{
      console.log(res)
    })
    //put請求
    axios.put('/put',my_data).then(res=>{
      console.log(res)
    })
    //patch請求
    axios.patch('/patch',my_data).then(res=>{
      console.log(res)
    })
    //delete請求
    axios.delete('/delete',{
      params:{  //params 鏈接帶參數
        id:12
      }
    }).then(res=>{
      console.log(res)
    })
    axios.delete('/delete2',{
      data:{  //data 鏈接不帶參數
        id:12
      }
    }).then(res=>{
      console.log(res)
    })
    axios({
      method: 'delete',
      url: '/delete3',
      params: {id:12}
      //data: {id:12}
    }).then(res=>{
      console.log(res)
    })
  }
}
</script>