《React-Native系列》32、 基于Fetch封装HTTPUtil工具类
来源：程序员人生 发布时间：2016-11-16 07:57:25 阅读次数：4966次
关于http要求的工具类，有很多，比方：httpclient，okhttp。
那末关于RN的处理HTTP要求的工具类呢，目前还没有找到，所以自己简单封装了1个，避免代码里到处都是fetch方法。
好了，完全代码以下：
var HTTPUtil = {};
/**
* 基于 fetch 封装的 GET要求
* @param url
* @param params {}
* @param headers
* @returns {Promise}
*/
HTTPUtil.get = function(url, params, headers) {
if (params) {
let paramsArray = [];
//encodeURIComponent
Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
if (url.search(/\?/) === ⑴) {
url += '?' + paramsArray.join('&')
} else {
url += '&' + paramsArray.join('&')
}
}
return new Promise(function (resolve, reject) {
fetch(url, {
method: 'GET',
headers: headers,
})
.then((response) => {
if (response.ok) {
return response.json();
} else {
reject({status:response.status})
}
})
.then((response) => {
resolve(response);
})
.catch((err)=> {
reject({status:⑴});
})
})
}
/**
* 基于 fetch 封装的 POST要求 FormData 表单数据
* @param url
* @param formData
* @param headers
* @returns {Promise}
*/
HTTPUtil.post = function(url, formData, headers) {
return new Promise(function (resolve, reject) {
fetch(url, {
method: 'POST',
headers: headers,
body:formData,
})
.then((response) => {
if (response.ok) {
return response.json();
} else {
reject({status:response.status})
}
})
.then((response) => {
resolve(response);
})
.catch((err)=> {
reject({status:⑴});
})
})
}
export default HTTPUtil;
怎样使用呢，举个简单的例子吧：
let formData = new FormData();
formData.append("id",1060);
HTTPUtil.post(url,formData,headers).then((json) => {
//处理 要求success
if(json.code === 0 ){
//我们假定业务定义code为0时，数据正常
}else{
//处理自定义异常
this.doException(json);
}
},(json)=>{
//TODO 处理要求fail
})
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
