aplus-axios-base-preset

基于aplus-axios-core的插件预设，主要封装了错误和成功的弹窗UI，同时支持vue3和react两种框架，应用于aplus项目。

安装

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

使用之前保证这3个包在项目中先要安装axios,aplus-axios-core,antd在执行上述命令

TIP

需要注意的是在defHttp.use(basePlugin)之后，需要从预设中导出axiosEvent,并注册两个预设自带的声明周期axiosError401和axiosGetToken,这里可查看原因

参数说明

属性	说明	TypeScript 类型	是否必须
locale	语言类型	'zh_CN' | 'en_US'	是
modal	antd中的modal实例	Omit<ModalStaticFunctions, 'warn'>	否
message	antd中的message实例	MessageInstance'	否
notification	antd中的notification实例	NotificationInstance	否

TIP

传入modal,message,notification的原因内部需要使用 App.useApp()创建的实例作为静态方法在@aplus-frontend/aplus-axios-react-preset包中调用，如何不是App.useApp()创建的项目运行时要报警告[antd: Modal] Static function can not consume context like dynamic theme. Please use 'App' component instead.,而且项目的ConfigProvider设置了主题token，内部的错误弹窗在执行时候不会有主题效果。综上所述只能能是项目运行时传入,后包内调用。

使用DEMO

import { App } from 'antd';
import { axiosReactPresent } from '@aplus-frontend/aplus-axios-react-preset';
import { defHttp } from '@aplus-frontend/axios-core';

function MyApp() {
  const { modal, message, notification } = App.useApp();
  const basePlugin = axiosReactPresent({
    locale: 'zh_CN',
    modal,
    message,
    notification
  });

  defHttp.use(basePlugin);
}
function Root() {
  return (
    <App>
      <MyApp />
    </App>
  );
}