对fetch针对RESTful进行再封装
2018-03-08 本文已影响0人
青云桑
因为后台使用到了RESTful API
,而且是使用Token
进行认证,所以最好是将fetch
再封装一层
首先定义几个常量
- 由于API的请求有
表单
和JSON
两种,所以先定义好ContentType
的常量 - RESTful API一般使用五种方法
GET/POST/PUT/PATCH/DELETE
,也定义为HttpMethod
的常量
export const ContentType = {
JSON : "application/json;charset=UTF-8",
FORM : "application/x-www-form-urlencoded; charset=UTF-8"
};
export const HttpMethod = {
GET : "GET",
POST : "POST",
PUT : "PUT",
PATCH : "PATCH",
DELETE : "DELETE"
};
定义Header的获取函数
由于使用Token认证
,所以编写一个getHeaders
函数来从Cookie
中获取Token
。
const getHeaders = () => {
const token = Cookies.get(COOKIE_TOKEN);
return {
"Content-Type": ContentType.JSON,
"Token": token
}
};
封装请求方法
这里以GET和POST作为举例,然后我们调用方法只需要关注请求的URL以及body即可。
export const _get = (url,body = null) => {
if(body !== null){
url = new URL(url);
Object.keys(body).forEach(key => url.searchParams.append(key, body[key]));
}
const promise = fetch(url,{
method : HttpMethod.GET,
headers: getHeaders(),
});
return handleFetch(promise);
};
export const _post = (url,body) => {
const promise = fetch(url,{
method : HttpMethod.POST,
headers: getHeaders(),
body : JSON.stringify(body)
});
return handleFetch(promise);
};
两个辅助函数
-
checkStatus
用来检查Response的状态是否为200,如果为200则转换为对象,不为200则抛出异常给其他地方处理 -
handleFetch
用来捕获异常并且调用reapop
通知请求错误
export const checkStatus = response => {
if(response.status === 200){
return response.json();
}
else {
throw new Error();
}
};
const handleFetch = promise => {
return promise
.then(response => checkStatus(response))
.catch(() => dispatch(error(FAIL_RESULT.message)))
};