JavaScript基本功之async-await

base

执行机制

• async 函数返回 Promise 对象，可以使用 then 方法添加回调函数。
• 当函数执行的时候，遇到 await 就会先返回，等到触发的异步操作完成，再接着执行 await 后面的语句。

async和await关系

• await 要放在 async 函数中
• 反过来 async 函数内可以没有 await

定义async方法的返回

• 没有返回: 相当于 return Promise.resolve(undefined)
• 返回基本类型: 相当于 return Promise.resolve(‘abc’)
• 抛出异常: 类似于 return Promise.reject(‘发生异常’
• 返回 promise resolve
• 返回 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= 呜呜呜

执行await方法的返回值

• 如果await后的promise是resolve，那么返回值就是resolve的值
• 如果await后的promise是reject，会被try后面的catch捕获住

// 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
})();

async await 能否代替 promise?

不能，比如 async await 没有 Promise.all Promise.race 等这些功能

demo:sleep+serial+parallel

• sleep: 线程休眠
• serial: 串行执行任务
• 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 

使用场景demo:顺序执行多个异步请求任务

// 需求：有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