npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@careteam/mfe-request

v1.0.22

Published

medical-data-fe request library

Downloads

8

Readme

中台前端请求库

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方案确认