在原生應用開發中，為了方便業務開發人員使用，我們一般會對網絡庫進行一些上傳封裝，而不是直接使用，例如基于AFNetworking庫的iOS請求上層封裝，Android的諸如volley,retrofit等。在前端開發中，一般使用fetch進行網絡請求，相關介紹請查看fetch示例。其實對于開發來說，系統提供的fetch已經夠用了，但是為了代碼的整體結構，建議對fetch進行簡單的Get/Post封裝。
若不封裝，我們看一下傳統的寫法：
fetch('http://www.pintasty.cn/home/homedynamic', {
method: 'POST',
headers: { //header
'token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJVLTliZGJhNjBjMjZiMDQwZGJiMTMwYWRhYWVlN2FkYTg2IiwiZXhwaXJhdGlvblRpbWUiOjE0NzUxMTg4ODU4NTd9.ImbjXRFYDNYFPtK2_Q2jffb2rc5DhTZSZopHG_DAuNU'
},
body: JSON.stringify({ //參數
'start': '0',
'limit': '20',
'isNeedCategory': true,
'lastRefreshTime': '2016-09-25 09:45:12'
})
})
.then((response) => response.json()) //把response轉為json
.then((responseData) => { // 上面的轉好的json
alert(responseData); /
// console.log(responseData);
})
.catch((error)=> {
alert('錯誤了');
})
}
是不是看著有一種密集恐懼癥，并且代碼的風格也不是很好。所以，為了方便使用，我們需要將公共的部分封裝起來，然后只需要通過參數的方式對外暴露出諸如請求Url，請求參數，Header就可以了。
var HTTPUtil = {};
/**
* GET請求
*/
HTTPUtil.get = function(url, params, headers) {
if (params) {
let paramsArray = [];
//encodeURIComponent
Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
if (url.search(/\?/) === -1) {
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:-1});
})
})
}
/**
* POST請求 FormData 表單數據
*/
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:-1});
})
})
}
export default HTTPUtil;
還是上面的例子，我們怎么使用呢？
let formData = new FormData();
formData.append("id",1060);
let url='http://www.pintasty.cn/home/homedynamic';
let headers='';
HTTPUtil.post(url,formData,headers).then((json) => {
//處理 請求結果
},(json)=>{
//TODO 處理請求fail
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
