Aplus-axios

Appearance

快速开始 ​

aplus-axios-core安装 ​

bash
pnpm add @aplus-frontend/axios-core -w

外部依赖了这三个包，确保项目中首先要安装axios,lodash-es和qs在执行上述命令

json
 "peerDependencies": {
    "axios": "^1.7.9",
    "lodash-es": "^4.17.21",
    "qs": "^6.13.1"
  }

aplus-axios-vue-preset预设安装 ​

bash
pnpm add @aplus-frontend/aplus-axios-vue-preset -w

外部依赖了这三个包，项目中首先要安装axios,@aplus-frontend/antdv和vue在执行上述命令

aplus-axios-react-preset预设安装 ​

bash
pnpm add @aplus-frontend/aplus-axios-react-preset -w

外部依赖了这三个包，项目中首先要安装axios,antd和react在执行上述命令

如何使用 ​

1
导入核心库
@aplus-frontend/axios-core
2
导入vue预设
@aplus-frontend/aplus-axios-vue-preset
3
注册defHttp
注册核心库
4
注册框架预设
注册预设插件，选择vue或react预设
5
使用框架预设
选择vue或react预设
6
注册生命周期
实际项目中，发送请求时刻只关心两个生命周期：请求前token获取，和401登出逻辑
ts
//1.导入核心库
import { defHttp as _defHttp } from '@aplus-frontend/axios-core';

//2.为aplus项目，实现的基于vue3和ant-design-vue 的预设
import {
  axiosVuePresent,
  axiosEvent
} from '@aplus-frontend/aplus-axios-vue-preset';

//3.注册核心库
const defHttp = _defHttp({
  apiUrl: 'http://demo.api.com',
  urlPrefix: '/api'
});

//4.注册插件预设
const basePlugin = axiosVuePresent({
  locale: 'zh_CN'
});
//5.使用插件预设
defHttp.use(basePlugin);

//6.注册生命周期
axiosEvent.on([
  {
    axiosError401: () => {
      console.log('页面登出逻辑');
    }
  },
  {
    axiosGetToken: () => {
      //发送请求默认全部带token，axiosGetToken注册需要返回项目token方可生效
      return getToken();
    }
  }
]);