@sinolink/http NPM

@sinolink/http

axios-v0.19.2 npm-v6.13 rollup-v1.19

基于axios的http库，依赖node服务core，封装了自动登录逻辑，session过期时自动调用登录方法。预设配置项，可调整行为。

背景

项目中，数据接口参数带有身份信息（如pid、fundAccount等）时，前端需要使用占位符 ($passportId)以使用node中的用户信息缓存。

若node session过期，无法正常请求接口，项目逻辑中需要处理此类情况。

该情况下的处理逻辑基本一致，故使用该组件封装axios interceptors，实现session过期时的自动登录并重试接口请求。

特性

基于 node-service/core 转发数据接口，在 node 返回用户身份权限失效时，自动调用 login 方法唤起客户登录。
基于 node-service/core 转发数据接口，解析并统一化 response 格式。

安装

组件已发布在内部npm仓库，可安装使用：

npm install @sinolink/http --registry http://192.168.23.21

建议先配置host和npm环境：

//配置host文件
192.168.23.21 npm.sinolink.com

//命令行运行
npm config set @sinolink:registry http://npm.sinolink.com

然后可以直接安装

npm install @sinolink/http

用法

普通 GET 请求：

import http from '@sinolink/http';

http.get('/api', {
    params: {
        id: 123
    }
}).then(response=>{})
    .catch(error=>{});

普通 POST 请求

import http from '@sinolink/http';

http.post('/api', {
    id: 123
},{
    "content-type": "application/json"
}).then(response=>{})
    .catch(error=>{});

http模块基于 axios ，更多用法参考 axios

带用户信息占位符的 POST 请求（基于 node-service/core）

const API_URL = `${location.origin}/yjbwebservice/core/api`;

http.post(API_URL, {
    UniqueKey: "serviceName.client.profile.getclientinfo",
    clientId: "($clientId)",
}).then(response=>{})
    .catch(error=>{});

NOTE: 使用用户信息占位符作为入参，若 node session 过期，http 会自动调用登录方法。
登录方法基于 @sinolink/login
IMPORTANT： 即使 http 代理了登录行为，依旧有 code === -1 的接口错误，页面需要处理该类场景。

可通过配置关闭 http 的自动登录行为

const API_URL = `${location.origin}/yjbwebservice/core/api`;

http.post(API_URL, {
    UniqueKey: "serviceName.client.profile.getclientinfo",
    clientId: "($clientId)",
}, {
    directResponse: true,
}).then(response=>{})
    .catch(error=>{});

IMPORTANT： 由于 axios 的遗留问题，实例的自定义配置项无法通过 axios 全局默认值配置。故以 http.defaults.directResponse = true 形式来预设配置项是无效的，请自行封装方法。

查看更多配置项，见配置项说明

查看更完整的用法，见 demos

API

NOTE: http 库本质上是 axios 的实例

request<T>(config: HttpRequestConfig): Promise<T>

get<T>(url: string, config?: HttpRequestConfig): Promise<T>
post<T>(url: string, data?: any, config?: HttpRequestConfig): Promise<T>
put<T>(url: string, data?: any, config?: HttpRequestConfig): Promise<T>
delete<T>(url: string, config?: HttpRequestConfig): Promise<T>

配置项说明

interface HttpRequestConfig {
    //axios 原有配置项见 https://github.com/axios/axios
    //..., 
    
    // `directResponse` 可以禁用自动登录
    // 若 directResponse 为 false， 则接口 由于 node session 过期 返回失败时
    // 组件会自动调用 login 方法唤起登录
    directResponse: boolean, //default: false
        
    // `notParseResponse` 可以禁用 axios 返回值结构解析
    // 若 notParseResponse 为 false，组件的返回值为 response.data
    // 如果需要获取完整的 axios 返回值对象，配置 notParseResponse 为 true
    notParseResponse: boolean, //defalut: false
        
    // `beginLoginBackUrl` 用于设定 login 方法的 backUrl 参数
    beginLoginBackUrl: string, //default: location.href
    
    // `LoginAction` 用于设定 自定义 login 方法
    // default: beginLogin (import from '@sinolink/login')
    // hint1: 默认的login方法包含节流优化，配置自定义login时需要考虑节流处理
    // hint2: login方式应当返回 Promise 对象，该promise会堵塞当前请求。
    //        在promise被resolve或reject之前，请求不会返回内容。
    LoginAction: (loginType: LoginTypeEnum) => Promise<boolean | void>,

}

type LoginTypeEnum = '1'|'2'|'p'|'u';