axios之前端發送get與post請求模板

腳手架項目

根據提示可以安裝axios模塊

cnpm install axios -S

或者

npm install axios -S

代碼中局部導入

項目中安裝完成上述axios模塊之后，在要使用axios的vue文件頁面當中的script代碼塊導入axios依賴

import axios from "axios";

so,easy! Too Heapy

axios請求模板

官方文檔：https://www.npmjs.com/package/axios；別看啦，我知道你趕時間😅

get請求模板

mounted() {
    axios
      .get(
        "/api/queryusertree?domId=" + this.domId + "&ownerId=" + this.ownerId,
        {
          headers: { Validate: "123456" }
        }
      )
      .then(response => {
　　　　　//注意response.data就已經是后端傳過來的數據對象了，我之所以response.data.data是因為我的后端對象的一個屬性字段叫做data
        let object = response.data.data;
        let head = object;
        this.data = object.childList;
        console.log(this.data);
      })
      .catch(error => {
        console.log(error);
        alert("網絡錯誤，不能訪問");
      });
  },

 

post請求模板

remove(userId) {
      let data = {
        domId: this.domId,
        ownerId: this.ownerId,
        userId: userId
      };//post傳遞對象到后台

      axios
        .post("/api/removedomuser", data, {
          headers: {
            //頭部信息
            "Content-Type": "application/json;charset=utf-8",
            Validate: "123456" 
          }
        })
        .then(response => {
          let resultUtils = response.data;
          console.log(resultUtils);
        })
        .catch(error => {
          console.log(error);
          alert("網絡錯誤，不能訪問");
        });
    },