1. 程式人生 > 其它 >手寫非同步處理的幾種方案

手寫非同步處理的幾種方案

``

點選檢視程式碼
// 最早期的非同步
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();
}
保持好奇,保持學習,做時間的朋友