@careteam/mfe-request

中台前端请求库

example

import { createAxios } from '@tencent/mfe-request';
import { message } from '@tencent/ten-design-react';
const config = {
    baseURL: 'http://origin-ci.oa.com/',
    $message: message, // 注入消息提示处理器，（需具备error,warning,info方法）
    loginPath: '/login', // 配置鉴权失败跳转登录路径，默认值为/user/login
    unauthRedirect: () => {}, // 配置自定义鉴权失败重定向处理方法，未配置则走默认逻辑跳转login_with_ticket

}

// client 环境使用
const httpClient = createAxios(config);

// server 环境使用
const httpServer = createAxios(config);

httpClient.get('/api/user').then(data => {})
httpServer.post('/api/user', {}, {
    noErrorToast: true // 禁用错误toast提示
    disableAuthRedirect: true // 禁用鉴权失败自动跳转登录
}).then(data => {})

完全自定义插件

import { create } from '@tencent/mfe-request/creaters/create';
const { http, usePlugins } = create();

usePlugins([]);

const loading = http.get('/api/user').then(data => {});

trpc调用 （外网版本暂不支持）

import { createAxios } from '@tencent/mfe-request';
const config = {
    protocol: 'trpc',
    pkg: Greeter,
    callee: '',
}

// server 环境使用
const trpcServer = createAxios(config);

trpcServer.post('sayHello', { message: 'tRPC-Node' }).then(data => {})

添加自定义拦截器

• https://github.com/axios/axios#interceptors

mock

可用开源方案

• https://github.com/ctimmerm/axios-mock-adapter

---

背景及目标：

• 统一调用方式，简化接口调用流程
• 请求库具备一定的业务属性（日志、鉴权、错误码响应、请求头处理、登录态校验），一般需要二次封装，不太能和其他部门复用
• 浏览器端和node端请求方式统一

设计思路：

• 职责单一、简化代码、内置通用插件
• 使用adapter提供多环境场景能力（client、server、trpc、mock)
• 使用拦截器横向逻辑插件化

目前设计方案：

• 基于axios做aop化二次封装
• 内部处理掉浏览器端及服务端异化逻辑
• 内置通用插件、同时支持业务自定义拦截器

探讨：

• 加入trpc支持，看看能否统一
• mock方案确认