base
Execution mechanism
- The async function returns a Promise object, and you can use the then method to add a callback function.
- When the function is executed, it will return first when encountering await, wait until the triggered asynchronous operation is completed, and then execute the statement following await.
The relationship between async and await
- await should be placed in async function
- Conversely, there can be no await in the async function
Define the return of async method
- No return: equivalent to return Promise.resolve(undefined)
- Return basic type: equivalent to return Promise.resolve(‘abc’)
- Throw an exception: similar to return Promise.reject(‘An exception occurred’
- return promise resolve
- return promise reject
// 1. 没有返回: 相当于 return Promise.resolve(undefined)
async function fn (){
console.log('执行一些操作')
}
let p = fn()
console.log('p=',p)
p.then(data=>{
console.log('data=',data)})
// 执行一些操作
// p= Promise {<fulfilled>: undefined}
// data= undefined
// 2. 返回基本类型: 相当于 return Promise.resolve('abc')
async function fn (){
console.log('执行一些操作')
return 'abc'
}
let p = fn()
console.log('p=',p)
p.then(data=>{
console.log('data=',data)})
// 执行一些操作
// p= Promise {<fulfilled>: 'abc'}
// data= abc
// 3. 抛出异常: 类似于 return Promise.reject('发生异常'
async function fn (){
console.log('执行一些操作')
throw new Error('发生异常')
}
let p = fn()
console.log('p=',p)
p.then(data=>{
console.log('data=',data)})
.catch(error=>console.log('error=',error))
// 执行一些操作
// p= Promise {<rejected>: Error: 发生异常
// error= Error: 发生异常
// 4. 返回 promise resolve
async function fn (){
console.log('执行一些操作')
return Promise.resolve('哈哈哈')
}
let p = fn()
console.log('p=',p)
p.then(data=>{
console.log('data=',data)})
.catch(error=>console.log('error=',error))
// 执行一些操作
// p= Promise {<fulfilled>: "哈哈哈"
// data= 哈哈哈
// 5. 返回 promise reject
async function fn (){
console.log('执行一些操作')
return Promise.reject('呜呜呜')
}
let p = fn()
console.log('p=',p)
p.then(data=>{
console.log('data=',data)})
.catch(error=>console.log('error=',error))
// 执行一些操作
// p= Promise {<rejected>: "呜呜呜"
// error= 呜呜呜
Return value of executing await method
- If the promise after await is resolve, then the return value is the value of resolve
- If the promise after await is reject, it will be captured by the catch after try.
// 1. promise resole data
// await 返回 data
const p = () =>{
return Promise.resolve(4); }
(async () => {
const ret = await p();
console.log('ret= ',ret);
// ret= 4
})();
// 2. promise reject error
// await 后面语句不执行，catch捕获error
const p = () => {
return Promise.reject('系统异常'); }
(async () => {
try {
const ret = await p();
console.log('ret= ', ret); // 不会执行
} catch (error) {
console.log('error= ', error);
// error= 系统异常
}
})();
// 3. promise 链式返回
// await 返回最后的data
const p = () => {
return Promise.resolve(4).then(data => {
return 5; // 相当于 return Promise.resolve(5)
});
}
(async () => {
const ret = await p();
console.log('ret= ', ret);
// ret= 5
})();
Can async await replace promise?
No, for example, async await does not have such functions as Promise.all Promise.race etc.
demo:sleep+serial+parallel
- sleep: Thread sleeps
- serial: execute tasks serially
- parallel: execute tasks in parallel
function sleep(second) {
return new Promise(resolve => {
console.log('sleep...')
setTimeout(() => resolve(true), second * 1000)
})
}
async function task() {
console.log('task start')
await sleep(1) // 1s
console.log('task end')
}
async function serial() {
console.log('task start')
await sleep(1) // 1s
await sleep(1) // 1s
await sleep(1) // 1s
console.log('task end')
}
async function parallel() {
console.log('task start')
await Promise.all([sleep(1),sleep(1),sleep(1)])
console.log('task end')
}
// 需求1：线程休眠
// task()
// 效果：打印 task start -》休眠1s -》 打印 task end
// 需求2：串行执行任务
// serial()
// 效果：打印 task start -》按顺序执行3次休眠1s -》 打印 task end
// 需求3: 并行行执行任务
// parallel()
// 效果：打印 task start -》同时执行3次休眠1s -》 打印 task end
Usage scenario demo: sequentially execute multiple asynchronous request tasks
// 需求：有3个异步请求，分别获取用户数据、订单数据、商品数据，需要按顺序获取
// 因为: 3个请求之间有关联关系，例如需要用户信息才能得到订单信息，需要订单信息才能得到闪屏信息，
function getUsers() {
return new Promise(resolve => {
console.log('getUsers...')
setTimeout(() => resolve('用户数据'), 500);
});
}
function getOrders() {
return new Promise(resolve => {
console.log('getOrders...')
setTimeout(() => resolve('订单数据'), 500);
});
}
function getGoods() {
return new Promise(resolve => {
console.log('getGoods...')
setTimeout(() => resolve('商品数据'), 500);
});
}
async function getData() {
console.log('getData start')
let result1 = await getUsers()
let result2 = await getOrders()
let result3 = await getGoods()
console.log('result1=',result1)
console.log('result2=',result2)
console.log('result3=',result3)
console.log('getData end')
}
// TEST
getData()
// getData start
// getUsers...
// getOrders...
// getGoods...
// result1= 用户数据
// result2= 订单数据
// result3= 商品数据
// getData end