您好,登錄后才能下訂單哦!
現(xiàn)在應(yīng)該大部分公司都是前后端分離了。so,數(shù)據(jù)請(qǐng)求的封裝還是必須的。
為了實(shí)現(xiàn)向ios中block封裝請(qǐng)求的異步的效果,我采用JavaScript中promise這個(gè)對(duì)象。
var p1 = New promise((resolve,reject)=>{ var timeOut = Math.random() * 2; log('set timeout to: ' + timeOut + ' seconds.'); setTimeout(function () { if (timeOut < 1) { log('call resolve()...'); resolve('200 OK'); } else { log('call reject()...'); reject('timeout in ' + timeOut + ' seconds.'); } }, timeOut * 1000); })
其中resolve,reject就相當(dāng)于是你定義了兩個(gè)block,然后把數(shù)據(jù)傳出去。
繼續(xù)往下看,緊接著上面的代碼
var p2 = p1.then(function (result) { //resolve 導(dǎo)出的數(shù)據(jù) console.log('成功:' + result); }); var p3 = p2.catch(function (reason) { //reject 導(dǎo)出的數(shù)據(jù) console.log('失?。? + reason); });
通過(guò)查閱資料還發(fā)現(xiàn)另外兩種用法,Promise.all 和 Promise.race這兩種。
var p1 = new Promise(function (resolve, reject) { setTimeout(resolve, 500, 'P1'); }); var p2 = new Promise(function (resolve, reject) { setTimeout(resolve, 600, 'P2'); }); // 同時(shí)執(zhí)行p1和p2,并在它們都完成后執(zhí)行then: Promise.all([p1, p2]).then(function (results) { console.log(results); // 獲得一個(gè)Array: ['P1', 'P2'] });
這一種是p1 和 p2 都返回了數(shù)據(jù),才會(huì)執(zhí)行all后面的then函數(shù)。挺像ios中GCD的notify函數(shù)
第二種
var p1 = new Promise(function (resolve, reject) { setTimeout(resolve, 500, 'P1'); }); var p2 = new Promise(function (resolve, reject) { setTimeout(resolve, 600, 'P2'); }); Promise.race([p1, p2]).then(function (result) { console.log(result); // 'P1' });
race跑步的意思,看誰(shuí)跑得快,跑得慢的就被摒棄掉了。
上面這些是封裝的基礎(chǔ),下面來(lái)看具體應(yīng)用#
基于axios的請(qǐng)求封裝
//判斷請(qǐng)求環(huán)境來(lái)區(qū)分鏈接 生產(chǎn)環(huán)境和測(cè)試環(huán)境 const ajaxUrl = env === 'development' ? 'https://www.baidu.com' : env === 'production' ? 'https://www.baidu.com' : 'https://www.baidu.com'; util.ajax = axios.create({ baseURL: ajaxUrl, timeout: 30000 }); // options中包含著數(shù)據(jù) export function axiosfetch(options) { return new Promise((resolve, reject) => { var token = window.localStorage.getItem('token') ? window.localStorage.getItem('token') : ""; var cid = window.localStorage.getItem('X-CID') ? window.localStorage.getItem('X-CID') : ""; // var language = window.localStorage.getItem('language') ? window.localStorage.getItem('language') : ""; var language = tools.getCookie('language')?tools.getCookie('language'): navigator.language; language = language == "en-US" ? "en" : language ; debug.log(language) var params = tools.deepClone(options.params);//深拷貝 var sign_str = tools.sign(params); //簽名 const instance = axios.create({ baseURL: ajaxUrl, timeout: 30000, //instance創(chuàng)建一個(gè)axios實(shí)例,可以自定義配置,可在 axios文檔中查看詳情 //所有的請(qǐng)求都會(huì)帶上這些配置,比如全局都要用的身份信息等。 headers: { //所需的信息放到header頭中 // 'Content-Type': 'application/json', "Authorization": token, "X-CID":cid, "X-LOCALE":language, "X-SIGN":sign_str }, // timeout: 30 * 1000 //30秒超時(shí) }); let httpDefaultOpts = { //http默認(rèn)配置 method:options.method, url: options.url, timeout: 600000, params:Object.assign(params), data:qs.stringify(Object.assign(params)), // headers: options.method=='get'?{ // 'X-Requested-With': 'XMLHttpRequest', // "Accept": "application/json", // "Content-Type": "application/json; charset=UTF-8", // "Authorization": token // }:{ // 'X-Requested-With': 'XMLHttpRequest', // 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', // "Authorization": token // } } if(options.method=='get'){ //判斷是get請(qǐng)求還是post請(qǐng)求 delete httpDefaultOpts.data }else{ delete httpDefaultOpts.params } instance(httpDefaultOpts) .then(response => {//then 請(qǐng)求成功之后進(jìn)行什么操作 debug.log('參數(shù):') debug.log(options.params) debug.log('響應(yīng):') debug.log(response) debug.log(response.data.errno) if(response.data.errno == 401){ // alert(response.data.errmsg) // window.location.href = window.location.protocol + "http://" +window.location.host + '/#/login' return } if(response.data.errno == 400){ reject(response) return } resolve(response)//把請(qǐng)求到的數(shù)據(jù)發(fā)到引用請(qǐng)求的地方 }) .catch(error => { // console.log('請(qǐng)求異常信息=>:' + options.params + '\n' + '響應(yīng)' + error) debug.log('請(qǐng)求異常信息=>:' + options.params + '\n' + '響應(yīng)' + error) reject(error) }) }) }
外面再包一層
export function getNodeDetailInfo(address) { return axiosfetch({ url:api.nodeDetailAPI,//鏈接 method:"get",//get請(qǐng)求 params:{//數(shù)據(jù) address:address } }) }
再下面就是實(shí)際應(yīng)用。
getNodeDetailInfo(address).then(res => { var data = res.data.data; }).catch(error => { console.log(error, '請(qǐng)求失敗') })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。