tms-request
概要(使用前务必阅读最佳实践)
- [x] 基于axios二次封装，与axios的Api达到99%的相似度。
- [x] 摒弃callback回调,拥抱Promise与async/await。
- [x] 可定制化实例，同项目多实例运行无阻碍。
- [x] token携带。
- [x] 可配置过滤空值，防缓存。
- [x] 自定义响应与请求拦截器。
指南
安装：
//切换到tm私有镜像
yarn add tms-request初始化
tms-request的初始化有两种方式：
1、直接引用tms-request默认导出的实例：
import $http from 'tms-request';
function getUsers() {
return $http.get('/user' , {
pageNum: 1 ,
pageSize: 20
});
}该默认实例应用了太美业务的业务系统中的必要请求头，数据转换拦截，响应数据处理，与错误过滤等，如果项目请求接口较少，可以选择尝试这种用法。
2、创建属于自己的实例，并配置相关参数：
配置层级分为：默认级、实例级、请求级。优先级请求级最高，实例级次之，默认级最次之。
也就是说，如果你什么都没配置，会全部按默认配置走，与上面的那种默认请求实例没有任何区别，但是当你在调用create方法，并传入了配置后，会对默认配置，与你传入的实例配置进行merge操作，实例级配置项会覆盖同名的默认配置项。
随后，在每次发起请求时，你仍有机会添加配置覆盖默认配置，甚至是实例配置。
import http from 'tms-request';
const $http = http.create({
//是否要过滤Null值与Undefined 默认值为false
filter: false ,
//是否要添加防缓存随机数 默认为false
cache: false ,
//响应拦截器 加载于内置响应拦截器前 请谨慎使用 使用后请完整返回修改过后的response
responseInterceptor: response => response ,
//请求拦截器 加载于内置请求拦截器前 请谨慎使用 使用后请完整返回修改过后的config
requestInterceptor: config => config ,
//默认请求方法 默认为get 即使用$http.request的使用在不传入method时执行的请求动作
method: 'get' ,
//请求url前缀
baseURL: '/ccp-web' ,
//默认要携带的请求头
headers: {
'TMS-TOKEN': 'SSSSS'
} ,
//超时时间 默认为5秒
timeout: 5000 ,
//上传进度回调 建议在请求级别配置添加
onUploadProgress: progressEvent => progressEvent ,
//下载进度回调 建议在请求级别配置添加
onDownloadProgress: progressEvent => progressEvent
//还有更多配置项 请参考axios官方文档 翻阅配置api
});
function getUsers() {
return $http.get('/user' , {
pageNum: 1 ,
pageSize: 20
});
}使用：
1、get :
//第一个参数（必选）为请求url
//第二个参数（可选）为url后附带的querystring
//第三个参数（可选）为请求级别配置 此处订制的配置会覆盖默认的配置与实例级别配置
http.get('/user' ,
{
pageSize: 20 ,
pageNum: 1
} , {
filter: true,
headers: {
'Auth-Token':'qqqq'
}
}
);
//实际请求url为 /user?pageSise=20&pageNum=12、post、put、delete:
//post 与 put delete 参数与使用方式尽皆一致
//第一个参数（必选）请求地址
//第二个参数（可选）requestBody 即是要传输的data 默认为application/json格式
//第三个参数（可选）请求级别配置
http.post('/user' ,
{
username: 'ives' ,
age: 15 ,
girlFirend: null
} , {
filter: true ,
headers: {
'Auth-Token': 'qqqq'
}
}
);
http.put('/user' ,{
id:100
});
http.delete('/user' ,{
id:100
});最佳实践
可能大家都会有一些疑虑。如何封装请求方法，在哪里调用，如何复用？常规请求写在哪里，异步action又在何处请求？错误如何处理？下面我会一点点进行最佳实践的介绍。
1、如何使用：
切忌，请抛弃过去callback的写法，promise.then的写法也尽量不要去用，因为在es7的规范里，已经提供了最强大的异步处理机制-- async/await，关于这一点，如果有不了解的，可以随时百度，资料随手可得。
tms-request的请求库是基于axios进行的二次封装，也就是说，同样是基于Promsise的，我没有做出任何多余的回调形式的api。因为async/await是基于Promise的，那么也就说明，我们是天生支持async/await的，下面看代码。
function getUser(data = {}) {
return http.get('/user' , data);
}
async function main() {
const users = await getUser({pageSize: 20 , pageNum: 2});
console.log(users);
}
main();
因为getUser方法返回的是一个Promise，所以在main方法里，我们用await来承载getUser返回的结果，因为await的关系，我们拿到了该Promise的resovle结果。
2、错误处理
接口报错，或者服务器错误，如何拿到错误呢？正常的Promise，我们在第二个参数可以传入方法来catch,或者在then返回的对象后，加入.catch方法，await后同样允许你使用.catch方法，但我们既然已经选择了使用await,就应当有更优雅的处理方案，下面看代码。
function getUser(data = {}) {
return http.get('/user' , data); //假设参数传错 接口会返回异常信息
}
async function main() {
try {
const users = await getUser({pageSize: 20 , pageNum: 2});
console.log(users);
}catch (e) {
console.log(e.message) // '返回的异常信息'
}
}
main();
这一次，在返回Promise前，即发生了错误，然后，我们在后续的try catch语句中承接了错误，如果错误产生，会执行到catch内。
在react的组件内，我们可以这样实践。
class SomeComponenet extends React.Component {
state = {
loading: false ,
options: []
};
toggleLoading() {
this.setState(prevState => ({
loading: !prevState.loading
}));
}
async fetchOptions() {
this.toggleLoading();
try {
const options = await http.get('/options' , {
optionsGroupId: 123
});
this.setState({
options: options || []
});
} catch (e) {
//antd的message
message.error(e);
} finally {
this.toggleLoading();
}
}
async componentDidMount() {
await this.fetchOptions();
}
}
在这里，我们演示了完整的请求错误处理，首先我们在请求前，拉起loading,如果成功，把options赋值，如果失败，则弹出错误信息。最后在finally代码块里，无论上面请求成功与否，结束loading。
3、结合redux的异步action
未完待续。。。。