《React-Native系列》32、 基于Fetch封裝HTTPUtil工具類
來源：程序員人生 發布時間：2016-11-16 07:57:25 閱讀次數：5325次
關于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
})
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
