Rx-Http-Kit is a RxJs-based HTTP Client
Rx-Http-Kit inspired by Angular, supports the backend of Axios, XHR, UniApp.
It provides a normalization of HttpClient for NodeJs, Browser, Mini-App.
- Support multiple backend of http-request: Axios,XHR,UniApp
- Normalization: just provider a backend, HttpClient is the same
- Customize Backend
- Support RxJs
More usage samples can be found in the test directory. (Quick Test Dir)
npm install -S rx-http-kit
pnpm add rx-http-kit
import { HttpAxiosModule } from 'rx-http-kit';
const rxHttpAxiosModule = new HttpAxiosModule();
const httpClientAxios = rxHttpAxiosModule.getHttpClient();
httpClientAxios.get<CommonResponse>('/')
.pipe(tap((res)=>{
// handle response data;
}),finalize(()=>{
// eval func, such as remove loading status.
}))
.subscribe({
next(response){
},
error(err) {
}
})import { HttpXHRModule } from 'rx-http-kit';
const rxHttpXHRModule = new HttpXHRModule();
const httpClient = rxHttpXHRModule.getHttpClient();
httpClient.get<CommonResponse>('/')
.pipe(tap((res)=>{
// handle response data;
}),finalize(()=>{
// eval func, such as remove loading status.
}))
.subscribe({
next(response){
},
error(err) {
}
})import {
HttpClient, HttpBackend, HttpRequest, HttpEvent, HttpHeaders,
HttpHeaderResponse, HttpStatusCode,
HttpResponse,HttpErrorResponse,HttpModule,HttpInterceptingHandler,HttpInterceptor,HttpHandler,HttpResponseBase
} from 'rx-http-kit';
import { catchError, first, mergeMap, Observable, Observer, of, throwError } from "rxjs";
import { Storage } from '@util/storage';
import {Config} from '@config'
export class UniBackend extends HttpBackend {
handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
return new Observable((observer: Observer<HttpEvent<any>>) => {
uni.request({
url: req.urlWithParams,
data: req.body,
method: req.method as any,
withCredentials: req.withCredentials,
header: req.headers.toObject(),
success: (result: UniApp.RequestSuccessCallbackResult) => {
let status = result.statusCode;
const _header = new HttpHeaders(result.header);
// observer.next(
// new HttpHeaderResponse({
// headers: _header,
// status: result.statusCode,
// url: req.url,
// })
// );
let body: any | null = null;
if (status !== HttpStatusCode.NoContent) {
// Use XMLHttpRequest.response if set, responseText otherwise.
body = result.data;
}
if (status === 0) {
status = !!body ? HttpStatusCode.Ok : 0;
}
let ok = status >= 200 && status < 300;
if (ok) {
observer.next(
new HttpResponse({
body,
headers: _header,
status,
url: req.url,
})
);
observer.complete();
} else {
observer.error(
new HttpErrorResponse({
error: body,
headers: _header,
status,
url: req.url,
})
);
}
},
fail: (result: UniApp.GeneralCallbackResult) => {
const res = new HttpErrorResponse({
error: result.errMsg,
url: req.url,
});
observer.error(res);
},
});
});
}
}
export class MyInterceptor implements HttpInterceptor{
getAdditionalHeaders(headers: HttpHeaders) {
const AspMap = {
'zh-Hans': 'zh-Hans',
en: 'en',
};
const LangMap = {
'zh-Hans': 'zh-CN',
en: 'en-US',
};
const SysLangMap = {
'zh-CN': 'zh-Hans',
zh: 'zh-Hans',
zh_CN: 'zh-Hans',
'en-US': 'en',
en: 'en',
};
const offset = new Date().getTimezoneOffset() / 60;
let systemLanguage: any;
// #ifdef H5
systemLanguage = navigator.language;
// #endif
// #ifdef MP-WEIXIN
systemLanguage = uni.getSystemInfoSync().language;
// #endif
let defaultLuang = Storage.getItemSync(Config.i18nLocal) || SysLangMap[systemLanguage] || SysLangMap.zh_CN;
return {
'.aspnetcore.culture': AspMap[defaultLuang],
'accept-language': LangMap[defaultLuang],
'.Timezone-Offset': offset >= 0 ? `+${offset}` : `${offset}`,
Authorization: `Bearer ${Storage.getItemSync('token') || ''}`
};
}
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
let url = req.url;
if (
!/assets\//.test(url) &&
!url.startsWith('https://') &&
!url.startsWith('http://')
) {
const baseUrl= Config.baseUrl!;
url =
baseUrl +
(baseUrl.endsWith('/') && url.startsWith('/') ? url.substring(1) : url);
}
const newReq = req.clone({
url,
setHeaders: this.getAdditionalHeaders(req.headers)
});
return next.handle(newReq).pipe(
mergeMap(ev => {
if (ev instanceof HttpErrorResponse) {
return throwError(()=>ev.error);
}
if (ev instanceof HttpResponse) {
let body = ev.body;
if (body) {
body = (body as any)?.result ? (body as any)?.result : body;
}
return of(new HttpResponse({
body: body,
headers: ev.headers,
status: ev.status,
statusText: ev.statusText,
url: ev.url as any
}))
}
return of(ev)
}), catchError((err:HttpErrorResponse) => {
return throwError(()=>err.error);
}))
}
}
export class HttpUniModule implements HttpModule {
httpInterceptor: HttpInterceptingHandler;
constructor(private handler: HttpInterceptor[] = []) {
this.httpInterceptor = new HttpInterceptingHandler(
new UniBackend(),
this.handler
);
}
getHttpClient() {
return new HttpClient(this.httpInterceptor);
}
}
export const RxHttpClient = new HttpUniModule([new MyInterceptor()]).getHttpClient();
// RxHttpClient.get('/list')import { HttpAxiosModule, HttpXHRModule, HttpInterceptor } from 'rx-http-kit';
export class MyInterceptor implements HttpInterceptor{
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
let url = req.url;
if (
!/assets\//.test(url) &&
!url.startsWith('https://') &&
!url.startsWith('http://')
) {
const { baseUrl } = environment.api;
url =
baseUrl +
(baseUrl.endsWith('/') && url.startsWith('/') ? url.substring(1) : url);
}
const newReq = req.clone({
url,
setHeaders: this.getAdditionalHeaders(req.headers)
});
return next.handle(newReq).pipe(
mergeMap((ev) => {
// Normalization
if (ev instanceof HttpResponseBase) {
return this.handleData(ev, newReq, next);
}
// Next
return of(ev);
}),
catchError((err: HttpErrorResponse) => this.handleData(err, newReq, next))
);
}
}
const rxHttpAxiosModule = new HttpAxiosModule([new MyInterceptor()]);
// const rxHttpXHRModule = new HttpXHRModule();