TypeScript应用 极速上手（11）

1、Promise示例

（1）同步调用

//同步调用
 function add(a:number,b:number):number {
     return a + b 
 }
 console.log(add(2,3))

（2）模拟回调函数调用

如果add操作是一个网络请求，在服务器上进行计算，再把结果进行返回，前端单线程的话前端界面不能等待，用户操作就会卡住

因此采用回调函数的机制，把结果放在回调函数里面，回调函数不需要返回值

function add(a:number,b:number,callback:(res:number) => void):void {
    //模拟耗时的回调函数
    setTimeout(() => {
        callback(a+b)///执行a+b并把结果返回给res
    },2000)
    
}

//CallbackHell
add(2,3,res=>{
    console.log('2+3=',res) //"2+3=",  5 
    add(res,4,res2 => {
        console.log('2+3+4=',res2) //"2+3+4=",  9
    })
})

（3）Promise

其中：参数函数中的resolve参数为告诉外界结果的通路

function addPromise (a:number,b:number):Promise<number> {
    return new Promise((resolve,reject) => {
        if (b === 23){
            reject(`bad number:${b}`)
        }
        setTimeout(() => {
            resolve(a+b)
        },1000)
    })
}

function mul(a:number,b:number):Promise<number> {
    return new Promise((resolve,reject) => {
        setTimeout(() =>{
            resolve(a*b)
        },3000)
    })
}
//2+3+4+5
addPromise(2,23).then(res => {
    console.log('2+3=',res) //"2+3=",  5
    return addPromise(res,4)
}).then(res => {
    console.log('2+3+4=',res) //"2+3+4=",  9 
    return addPromise(res,5)
}).then(res => {
    console.log('2+3+4+5=',res) //"2+3+4+5=",  14
} ).catch(err => {
    console.log('caught error:' ,err) //"caught error:",  "bad number:23" 
})

//不打印日志的场景
addPromise(2,23).then(res => addPromise(res,4)).then(res => addPromise(res,5)).then(res => {
    console.log('final result:',res) //"final result:",  14 
}).catch(err => {
     console.log('caught error:' ,err) //"caught error:",  "bad number:23" 
})

//(2+3)*4+5
addPromise(2,3).then(res => {
    console.log('2+3=',res)
    return mul(res,4)
}).then(res => {
    console.log('(2+3)*4=',res)
    return addPromise(res,5)
}).then(res => {
    console.log('(2+3)*4+5=',res) //"(2+3)*4+5=",  25 
}).catch(err => {
    console.log('caught ereror:',err)
})