韵搜坊 -- 前端整合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;
});
相关推荐
invicinble1 分钟前
前端框架使用vue-cli( 第二层:工程配置层--4.axios需要做的基础配置)
前端·vue.js·前端框架
用户070455741295 分钟前
第一次前后端联调后,我终于理解了什么是工程化
前端
亲亲小宝宝鸭7 分钟前
Vue3中那些冷门但实用的方法
前端·vue.js
qq_349523267 分钟前
分析原型到表的过程
前端
11 分钟前
Pinia 全局状态管理
前端
M ? A11 分钟前
Vue 转 React | VuReact 实时监听开发指南
前端·vue.js·后端·react.js·面试·开源·vureact
陆枫Larry16 分钟前
uni-app 小程序:滚动联动透明导航栏的实现
前端
半兽先生18 分钟前
vue高性能下拉组件 支持上万数据不卡顿
前端·javascript·vue.js
懂懂tty30 分钟前
Vue3 架构
前端·vue.js
invicinble32 分钟前
前端框架使用vue-cli( 第二层:工程配置层--总览)
前端·vue.js·前端框架