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