手寫非同步處理的幾種方案
阿新 • • 發佈:2022-01-05
``
點選檢視程式碼
// 最早期的非同步 function requesUserInfo(url,id,successCallback,failureCallback){ setTimeout(() => { if(url === 'lsh'){ console.log('走成功的回撥'); successCallback(); }else{ console.log('走失敗的回撥'); failureCallback(); } }, 3000); } requesUserInfo('lsh','',()=>{ console.log('成功的回撥執行'); },()=>{ console.log('失敗的回撥執行'); }); // 有了promise後的樣子 var p = function requestData(url){ return new Promise((resolve,reject)=>{ setTimeout(() => { if(url === 'lsh'){ console.log('走成功的回撥'); resolve(); }else{ console.log('走失敗的回撥'); reject(); } }, 3000); }); } p.then(()=>{ console.log('成功的回撥執行'); },()=>{ console.log('失敗的回撥執行'); }) // 多次請求的需求出現了回撥地獄 // 如:先通過名字獲取到員工ID,再通過ID獲取userInfo得到一串部門id,再通過部門ID得到部門資訊,再通過再通過部門資訊 function requestData(url){ return new Promise((resolve,reject)=>{ setTimeout(() => { resolve(url); }, 3000); }); } // 不用then的 function getData(){ requestData('lsh').then(res1 => { requestData(res1+'aaa').then(res2 => { requestData(res2+'bbb').then(res3 => { console.log('res3',res3); }) }) }) } // 用then的 function getData(){ requestData('lsh').then(res1 => { return requestData(re1+'aaa'); }).then(res2 => { return requestData(res2+'bbb'); }).then(res => { console.log('res3',res3); }) } //generator方案 function* getData(){ const res1 = yield requestData('lsh'); const res2 = yield requestData(res1 + 'aaaa'); const res3 = yield requestData(res2 + 'bbbb'); const res4 = yield requestData(res3 + 'cccc'); console.log(res4); } const generator = getData(); gennerator.next().value.then(res => { gennerator.next(res).value.then(res => { gennerator.next(res).value.then(res => { gennerator.next(res) }); }); }); // 自動執行Generator函式 function execGenerator(genFn){ const generator = genFn function exec(res){ const result = gennerator.next(res) if(result.done) return result.value result.value.then(res => { exec(res) }) } exec(); }