http-ajax

Promise based HTTP client for the browser

Install

``bash
npm install http-ajax
`




Demo

在线示例

本地运行example示例
`
cd example
npm install
npm start

cd example/server
npm install
npm start
`
打开本地网址http://localhost:9700/app访问




Usage




$3

`
import ajax, { Ajax } from 'http-ajax';
import loadingExtend from 'http-ajax/dist/loading-extend';
import cryptoExtend from 'http-ajax/dist/crypto-extend';
import signatureExtend from 'http-ajax/dist/signature-extend';
import _ from 'lodash';

ajax.config({
/**
* url前缀
* @default '/api'
*/
prefix: '/api',
/**
* 成功失败标志字段
* @default 'result'
*/
statusField: 'result',
/**
* 成功回调
*/
onSuccess: (
xhr: XMLHttpRequest,
{
response,
options,
resolve,
reject,
}: {
response: Ajax.IResult;
options: Ajax.IOptions;
resolve: Ajax.IResolve;
reject: Ajax.IReject;
/* method /
method?: Ajax.IMethod;
/* url /
url?: string;
/* 请求参数 /
params?: Ajax.IParams | undefined;
/* 链路追踪 ID /
xCorrelationID?: string;
}
): void => {
// 处理成功回调
// 下面是默认处理代码
const { statusField } = ajax.getConfig();
if (response && typeof response === 'object' && typeof response[statusField] !== 'undefined') {
if (response[statusField]) {
if (response.confirmMsg) {
delete response[statusField];
resolve(response as T);
} else {
if (response.warnMsg) {
window.$feedback(response.warnMsg, 'warning');
}
resolve(response.data as T);
}
} else {
reject(response);
if (options && options.autoPopupErrorMsg === false) {
return;
}
window.$feedback(response.errorMsg);
}
} else {
resolve(response as T);
}
},
/**
* 失败回调
*/
onError: (xhr: XMLHttpRequest, _opts: Ajax.IRequestOptions): void => {
// 处理错误回调
// 下面是默认处理代码
const error = {
errorCode: xhr.status,
errorMsg: xhr.statusText,
};
this.catchError(
Object.assign(
{
remark: ajax: ${_opts.method} ${_opts.url} params: ${JSON.stringify(_opts.params)},
},
error
)
);
if (xhr.status === 401 || xhr.status === 406) {
this.onSessionExpired(error, _opts);
} else {
_opts.reject(xhr);
}
},
/**
* 请求发送前
*/
beforeSend: (props: {
method: Ajax.IMethod;
url: string;
params: Ajax.IParams;
options: Ajax.IOptions;
/* 是否显示 loading /
loading?: boolean;
}): Ajax.IRequestResult | void => {
let { options } = props;
// 添加默认请求头
_.defaultsDeep(options, {
headers: {
version: '1.0',
dataFrom: 0,
},
});
},
/**
* 数据处理
*/
processData: (params: Ajax.IParams, props: { method: Ajax.IMethod; url: string; options: Ajax.IOptions }): Ajax.IParams => {
// 自定义处理 params，比如 trim
// ...
return params;
},
/* 捕获错误 /
catchError: (props: Ajax.ICatchErrorOptions): void => {
// 这里可以自定义记录错误日志
}
});

// 添加显示loading扩展
ajax.extend(loadingExtend());

// 添加加解密扩展
ajax.extend(cryptoExtend());

// 添加签名扩展
ajax.extend(signatureExtend());
`




$3

#### get请求

`
import ajax from 'http-ajax';

// 发送get请求
ajax.get(url: string, params?: Ajax.IParams, options?: Ajax.IOptions).then((data) => {
this.data = data;
});

// 发送get请求，并显示加载进度条
ajax.loadable.get(url: string, params?: Ajax.IParams, options?: Ajax.IOptions).then((data) => {
this.data = data;
});
`

#### post请求

`
import ajax from 'http-ajax';

// 发送post请求
ajax.post(url: string, params?: Ajax.IParams, options?: Ajax.IOptions).then((data) => {
this.data = data;
});

// 发送post请求，并显示加载进度条
ajax.loadable.post(url: string, params?: Ajax.IParams, options?: Ajax.IOptions).then((data) => {
this.data = data;
});
`

#### put请求

`
import ajax from 'http-ajax';

// 发送put请求
ajax.put(url: string, params?: Ajax.IParams, options?: Ajax.IOptions).then((data) => {
this.data = data;
});

// 发送put请求，并显示加载进度条
ajax.loadable.put(url: string, params?: Ajax.IParams, options?: Ajax.IOptions).then((data) => {
this.data = data;
});
`

#### delete请求

`
import ajax from 'http-ajax';

// 发送delete请求
ajax.del(url: string, params?: Ajax.IParams, options?: Ajax.IOptions).then((data) => {
this.data = data;
});

// 发送delete请求，并显示加载进度条
ajax.loadable.del(url: string, params?: Ajax.IParams, options?: Ajax.IOptions).then((data) => {
this.data = data;
});
`




$3

#### processData
boolean.
为false时不格式化请求参数。

#### json
boolean.
为false时不调用JSON.parse处理返回值。

#### autoPopupErrorMsg
boolean.
为false时，不弹出错误提示。

#### responseType
'' | 'arraybuffer' | 'blob' | 'document' | 'json' | 'text'
设置请求responseTyp

#### cache
boolean
设置为true，缓存本次请求到的数据

#### onData
(data: any) => void
当陆陆续续获取数据片段时的回调函数

#### onProgress
(e?: ProgressEvent) => void
上传文件进度

#### headers
设置请求头

#### encrypt
'all' | string[]
加密字段

$3


自定义响应数据
`
(
/* 数据 /
data: any,
/* 响应头 /
headers?: { [name: string]: any }
) => any;
`

兼容性

兼容各主流浏览器。兼容IE需引入@babel/polyfill。

安装
`
npm install @babel/polyfill
`

入口文件开头加上
`
import '@babel/polyfill';
`

或在HTML页面中加上@babel/polyfill`的CDN资源引用。