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("网络错误,不能访问");
        });
    },
复制代码

 

posted @   研发之心  阅读(1912)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示