韵搜坊 -- 前端整合Axios(联调后端)

文章目录

官网:https://www.axios-http.cn/docs/intro

安装

java 复制代码
npm install axios

配置

坐标:plugins/myAxios.ts

java 复制代码
import axios from "axios";

const instance = axios.create({
  baseURL: "http://localhost:8101/api",
  timeout: 10000,
  headers: {},
});

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    const data = response.data;
    if (data.code === 0) {
      return data.data;
    } else {
      console.error("request error", data);
      return response.data;
    }
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default instance;

发送请求

java 复制代码
myAxios.post("/post/list/page/vo", {}).then((res: any) => {
  console.log(res);
  postList.value = res.records;
});

myAxios.post("/user/list/page/vo", {}).then((res: any) => {
  console.log(res);
  userList.value = res.records;
});
相关推荐
掘金安东尼1 分钟前
GPT-6 会带来科学革命?奥特曼最新设想:AI CEO、便宜医疗与全新计算机
前端·vue.js·github
申阳5 分钟前
Day 5:03. 基于Nuxt开发博客项目-页面结构组织
前端·后端·程序员
全马必破三13 分钟前
React的设计理念与核心特性
前端·react.js·前端框架
ttod_qzstudio19 分钟前
替代 TDesign Dialog:用 div 实现可拖拽、遮罩屏蔽的对话框
前端·tdesign
洞窝技术23 分钟前
前端人必看的 node_modules 瘦身秘籍:从臃肿到轻盈,Umi 项目依赖优化实战
前端·vue.js·react.js
Asort33 分钟前
React函数组件深度解析:从基础到最佳实践
前端·javascript·react.js
golang学习记34 分钟前
VS Code + Chrome DevTools MCP 实战:用 AI 助手自动分析网页性能
前端
用户40993225021236 分钟前
Vue 3中reactive函数如何通过Proxy实现响应式?使用时要避开哪些误区?
前端·ai编程·trae
Qinana41 分钟前
🌐 从 HTML/CSS/JS 到页面:浏览器渲染全流程详解
前端·程序员·前端框架
BBB努力学习程序设计43 分钟前
网页布局必备技能:手把手教你实现优雅的纵向导航
前端·html