typescript：4、promise

1、前端单线程异步模型

前端单线程异步模型：

前端代码异步运行机制

2、promise

javascript很容易出现回调套回调的情况，如下方的代码

function add( a:number, b:number, callback:(r:number)=>void): void {
	setTimeout( () => {
		callback( a + b)
	}, 2000)
}
add( 2, 3, res => {
	console.log('2+3', res)
	add( res, 4, res2 => {
		console.log(`${res}+4`, res2)
	})
})

2.1、创建promise

function add(a:number, b:number): Promise<number> {
	return new Promise( (resolve, reject) => {
		if ((a+b) > 20){
			reject('number > 20')//出错
		}
		setTimeout( () => {
			resolve( a + b)//正常
		}, 2000)
	})
}

add(2, 3).then( res => {
	console.log('2+3', res)
	return add(res, 4)
}).then( res => {
	console.log('2+3+4',res)
	return add(res, 6)
}).then( res => {
	console.log('2+3+4+6', res)
}).catch( err => {
	console.log('error: ', err)
})

2.2、同时等待多个promise

Promise.all()可以实现同时等待多个promise的效果

function add(a:number, b:number): Promise<number> {
	return new Promise( (resolve, reject) => {
		setTimeout( () => {
			resolve( a + b)//正常
		}, 2000)
	})
}

function mul(a: number, b: number): Promise<number> {
	return new Promise( (resolve, reject) => {
		setTimeout( () => {
			resolve(a*b)
		}, 3000)
	})
}

//多个promise并行执行
Promise.all( [add(2, 3), add(4, 5)]).then( res => {
	const [a, b] = res
	console.log('result', a, b)
	return mul(a, b)
}).then( res => {
	console.log('final result', res)
})

2.3、取任意一个promise

Promise.race()会只等待其中任意一个promise返回就执行then

function add(a:number, b:number): Promise<number> {
	return new Promise( (resolve, reject) => {
		setTimeout( () => {
			resolve( a + b)//正常
		}, 2000)
	})
}
Promise.race( [add(2, 3), add(4, 5)]).then( res => {
	console.log(res)
})

3、语法糖async-await

await关键字一定要在async关键字标注的函数内使用；
async关键字不会影响函数本身的调用，比如使用async关键字标注小程序的onLoad函数；
微信小程序若需要支持async-await语法需要开启增强编译配置，如下图：

代码示例

function add(a:number, b:number): Promise<number> {
	return new Promise( (resolve, reject) => {
		setTimeout( () => {
			resolve( a + b)//正常
		}, 2000)
	})
}

function mul(a: number, b: number): Promise<number> {
	return new Promise( (resolve, reject) => {
		setTimeout( () => {
			resolve(a*b)
		}, 3000)
	})
}
//calc函数会返回一个Promise
//async关键字声明的函数需要使用try-catch来捕捉错误
async function calc(){
	try{
		const a = await add(2, 3)
		const b = await add(4, 5)
		return await mul(a, b)
	} catch( err){
		console.log('caught err', err)
		return undefined
	}
}
calc().then( res => {
	console.log('final result', res)
})

function add(a:number, b:number): Promise<number> {
	return new Promise( (resolve, reject) => {
		setTimeout( () => {
			resolve( a + b)//正常
		}, 2000)
	})
}

function mul(a: number, b: number): Promise<number> {
	return new Promise( (resolve, reject) => {
		setTimeout( () => {
			resolve(a*b)
		}, 3000)
	})
}
async function calc(){
	try{
		const [a, b] = await Promise.all([add(2, 3), add(4, 5)])
		console.log('2+3', a)
		console.log('4+5', b)
		return await mul(a, b)
	}catch(err){
		console.log('caught err', err)
		return undefined
	}
}
calc().then( res => {
	console.log('final result', res)
})