Appearance
@yuyueyanyun/http
http 基于 axios 提供统一的请求层,包含如下特性
支持多种类型的 request type 内置异常处理逻辑 支持实例以及请求级的配置方案 支持 axios 原生所有特性
安装
npm init @yuyueyanyun/http
yarn init @yuyueyanyun/http使用
配置将会按优先级进行合并。 请求的 config > 实例的options
ts
import Http from '@yuyueyanyun/http';
export default (prefix: string) => Http({
baseURL: prefix,
requestType: 'json',
ignoreError: false,
handlerHeader: (header, config) => {
},
dataValidator: (resp) => {
},
format: (response) => {
},
handlerError: (error, message) => {
},
});baseURL
配置服务的域名或者前缀, 在实际业务中,baseUrl 一般通过构建配置中的环境信息获取。
ts
Http({
baseURL: import.meta.env.VITE_PROXY_URL,
// ...
})requestType
内置 4 种请求类型(form、formData、json、text),针对不同的请求类型会自动转换 data 并添加对应的 content-type header。使用时只需要传入 requestType。 默认json
ignoreError
是否启用 handlerError 默认 false
handlerHeader
配置服务的域名或者前缀, 在实际业务中,baseUrl 一般通过构建配置中的环境信息获取。
ts
Http({
handlerHeader: (header, config) => {
return {
...header,
Authorization: ''
}
}
})dataValidator
请求成功后,进入数据校验。如果返回有值则进入异常处理。
ts
Http({
dataValidator: (resp) => {
if (resp.data.code === 1) {
const message = resp.data.msg || errorCode.default;
return message;
}
},
})format
对返回的数据进行统一处理。
ts
Http({
format: (resp) => {
return resp?.data?.data
},
})handlerError
异常处理:请求异常或者数据业务错误 当ignoreError:true时不触发
ts
Http({
handlerError: (error, message) => {
ElMessage({
message: message,
type: 'error',
});
},
})