韵搜坊 -- 前端整合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;
});
相关推荐
陈随易2 分钟前
MCP协议第5次更新,从打电话到微信聊天的巨大变革
前端·后端·程序员
omnijk28 分钟前
前端工程化
前端
做前端的娜娜子29 分钟前
前端必看!我把一段"能跑不敢动"的报表代码用 AI 重构成了组件(附完整 Prompt)
前端·ai编程
hunterandroid1 小时前
[鸿蒙从零到一] ArkUI 动画与转场实战:状态驱动、组件过渡与页面衔接
前端
何时梦醒1 小时前
React + TypeScript + Vite 实战:从零构建 Color Picker 应用
前端·javascript·架构
谁在黄金彼岸1 小时前
Nuxt.js 详解(一):Vue 开发者为什么要关注 Nuxt
前端
英勇无比的消炎药1 小时前
TinyRobot v0.5.0 深度解读(三):Layout 组件——如何组织复杂工作区的页面布局
前端·vue.js
默_笙1 小时前
😋 我让 DeepSeek-R1 在浏览器本地跑了起来,后端同事说"你认真的?"
前端·javascript
英勇无比的消炎药1 小时前
TinyRobot v0.5.0 深度解读(四):CLI 脚手架——从零搭建 AI 应用的工程化实践
前端·vue.js·github