@winner-fed/business-request v1.0.0-alpha.3
business-request
网络请求库,基于 axios 封装,旨在提供一个统一的 api 调用方式, 简化使用。
安装
npm install --save @winner-fed/business-request
快速上手
基础参数配置
import {createRequest} from '@winner-fed/business-request';
const api = createRequest({
baseURL: 'https://api.github.com/',
timeout: 3000
)};
GET 请求
api
.get('/users/octocat?_t=' + Date.now())
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
// 也可将 URL 的参数放到 options.params 里
api
.get('/users/octocat', {
params: {
_t: Date.now(),
},
})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
POST 请求
api
.post('/users/octocat', {
name: 'Mike',
})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
business-request API
request(url, options)
api.request('/api/v1/xxx', {
method: 'get',
params: { id: 1 },
})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
request('/api/v1/user', {
method: 'post',
data: {
name: 'Mike',
},
})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
请求方法的别名
为了方便起见,为所有支持的请求方法提供了别名, method
属性不必在配置中指定
api.request(url, CreateAxiosOptions)
api.get(url, CreateAxiosOptions)
api.post(url[, data, CreateAxiosOptions)
api.delete(url[, data, CreateAxiosOptions)
api.put(url[, data, CreateAxiosOptions)
interface CreateAxiosOptions extends AxiosRequestConfig {
// 前缀,统一设置 url 前缀
// 接口地址中的 path 部分
// ( e.g. request('/user/save', { prefix: '/api/v1' }) => request('/api/v1/user/save') )
prefix?: string;
// 后缀,统一设置 url 后缀
// ( e.g. request('/api/v1/user/save', { suffix: '.json'}) => request('/api/v1/user/save.json') )
suffix?: string;
// post类型, 用来简化写content-Type, 默认json
requestType?: string;
transform?: AxiosTransform;
// 请求参数拼接到url
joinParamsToUrl?: boolean;
// 是否处理请求
isTransformRequestResult?: boolean;
// 是否对 response 做处理简化
// 是否对请求返回的 Response 对象做格式、状态码解析
isTransformResponseResult?: boolean;
// 是否打印日志
isDebug?: boolean
}
abstract class AxiosTransform {
/**
* @description: 请求成功处理
*/
transformResponseData?: (res: AxiosResponse, config: CreateAxiosOptions) => any;
/**
* @description: 请求之前的拦截器
*/
requestInterceptors?: (config: CreateAxiosOptions) => CreateAxiosOptions;
/**
* @description: 请求之前的拦截器错误处理
*/
requestInterceptorsCatch?: (error: Error) => void;
/**
* @description: 响应的拦截器
*/
responseInterceptors?: (res: AxiosResponse) => AxiosResponse;
/**
* @description: 响应的拦截器错误处理
*/
responseInterceptorsCatch?: (error: Error) => void;
/**
* @description: 请求失败处理
*/
errorHandler?: (e: Error) => Promise<any>;
}
请求参数配置
axios 其他请求配置参数详见,https://github.com/axios/axios#request-config
{ // 'method' 是创建请求时使用的方法 method: 'get', // default
// 'params' 是即将于请求一起发送的 URL 参数,参数会自动 encode 后添加到 URL 中 // 类型需为 Object 对象或者 URLSearchParams 对象 params: { id: 1 },
// 'data' 作为请求主体被发送的数据 // 适用于这些请求方法 'PUT', 'POST', 和 'PATCH' // 必须是以下类型之一: // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams // - 浏览器专属:FormData, File, Blob // - Node 专属: Stream data: { name: 'Mike' },
// 'headers' 请求头 headers: { 'Content-Type': 'application/json' },
// 'timeout' 指定请求超时的毫秒数(0 表示无超时时间) // 如果请求超过了 'timeout' 时间,请求将被中断并抛出请求异常 timeout: 25000,
// ----------------业务封装,自定义请求参数 // ’prefix‘ 前缀,统一设置 url 前缀 // ( e.g. request('/user/save', { prefix: '/api/v1' }) => request('/api/v1/user/save') ) prefix: '',
// ’suffix‘ 后缀,统一设置 url 后缀 // ( e.g. request('/api/v1/user/save', { suffix: '.json'}) => request('/api/v1/user/save.json') ) suffix: '',
// 'requestType' 当 data 为对象或者数组时, 会根据 requestType 动态添加 headers 和设置 body(可传入 headers 覆盖 Accept 和 Content-Type 头部属性): // 1. requestType === 'json' 时, (默认为 json ) // options.headers = { // Accept: 'application/json', // 'Content-Type': 'application/json;charset=UTF-8', // ...options.headers, // } // options.body = JSON.stringify(data) // 2. requestType === 'form' 时, // options.headers = { // Accept: 'application/json', // 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8', // ...options.headers, // }; // options.body = query-string.stringify(data); // 3. 其他 requestType // options.headers = { // Accept: 'application/json', // ...options.headers, // }; // options.body = data; requestType: 'json', // default
// ’isTransformResponseResult‘ 是否对请求返回的 Response 对象做格式、状态码解析 isTransformResponseResult: true, // default
// 是否打印请求及相应日志 isDebug: true,
// 'responseType': 如何解析返回的数据,当 parseResponse 值为 false 时该参数无效 // 默认为 'json', 对返回结果进行 Response.text().then( d => JSON.parse(d) ) 解析 // 其他(text, blob, arrayBuffer, formData), 做 ResponseresponseType 解析 responseType: 'json', // default
// 请求数据处理及相应数据处理 transform: { // 相应数据处理 transformResponseData (res: AxiosResponse, config: CreateAxiosOptions) => void // 请求之前的拦截器 requestInterceptors (config: CreateAxiosOptions) => CreateAxiosOptions; // 请求之前的拦截器错误处理 requestInterceptorsCatch?: (error: Error) => void; // 响应的拦截器 responseInterceptors?: (res: AxiosResponse) => AxiosResponse; // 响应的拦截器错误处理 responseInterceptorsCatch?: (error: Error) => void; // 'errorHandler' 统一的异常处理,供开发者对请求发生的异常做统一处理,详细使用请参考下方的错误处理文档 // 错误处理在应用中一般分三层:系统层异常处理、通用业务异常处理、特殊异常错误处理,umi-request 提供的 errorHandler 会在请求初始化(参数异常)、请求过程(超时)、请求响应(状态码非 200)等情况下触发执行,处理的是系统层异常情况,现在更多情况是后端会在触发异常时返回 200 的响应并将异常码放到响应中去,前端同学通过异常码来区分是哪类异常,这种情况可以通过解析响应对象,通过 throw error 来触发 errorHandler 做统一异常处理。 errorHandler?: (error) { / 异常处理 / }, }
}
## 其他方法
```typescript
// 设置通用URL
setBaseURL(baseURL: string): void
// 设置通用 Header
setHeader(headers: any): void
TODO
- 支持公共参数配置,如data,也支持具体请求参数覆盖
- 请求数据拦截(扩展性),响应数据拦截