ES6之async与await
创始人
2024-02-04 16:33:14

· async – await 是 Promise 和 Generator 的语法糖,目的只是为了让我们书写代码时更加流畅,增强代码的可读性。

· async – await 是建立在Promise机制之上的,并不能取代其地位

基本语法:

async function demo01() {let result = await Math.random()console.log(result)  
}demo01()   //  输出一个随机数

async:

async用来表示函数是异步的,定义的函数会返回一个Promise对象,可以使用then方法添加回调函数

async function demo02() {return '返回结果'  
}demo02().then(res => console.log(res)) // 输出: 返回结果(若 async 定义的函数有返回值,相当于Promise.resolve('返回结果'))

await:await必须出现在 async 函数内部,不能单独使用。

·await后面可以跟任何js表达式。它最主要的意图是用来等待 Promise 对象的状态被 resolved。

·如果await的是 Promise 对象会造成异步函数 停止执行并且 等待Promise的解决,如果等的是正常的表达式则立即执行

使用方法

function sleep(second) {return new Promise((resolve, reject) => {setTimeout(() => {resolve('enough sleep~')}, second)})
}async function dome03() {await () => {console.log('表达式立即执行')}let result = await sleep(2000)console.log(result)  //需要等待 sleep 函数执行完成 resolve 才输出(2000毫秒后输出:enough sleep~)       
}

实例1(模拟当一个请求需要依赖上一个请求返回的参数时,async与await的使用实例):

// 模拟异步请求
function sleep(second, param) {return new Promise((resolve, reject) => {setTimeout(() => {resolve(param);}, second);})
}async function test() {let result1 = await sleep(2000, 'req01')// 等待第一个 await 执行完成let result2 = await sleep(1000, 'req02' + result1)// 等待第二个await 执行完成let result3 = await sleep(500, 'req03' + result2)// 等待所有的await执行完成console.log(`${result3} --- ${result2} --- ${result1}`)
}test()  // 等待所有的 await 执行完成输出:req01 --- req02req01 --- req03req02req01

实例2(当需要异步发送多个请求且请求都是独立时的实例):

function sleep(second) {return new Promise((resolve, reject) => {setTimeout(() => {resolve('request done! ' + Math.random());}, second);})
}// 正确写法
async function correctDemo() {let p1 = sleep(1000);let p2 = sleep(1000);let p3 = sleep(1000);// Promise.all('一个可迭代的对象') 将多个 Promise 实例,包装成一个新的 Promise 实例,一次性处理n个Promise对象。await Promise.all([p1, p2, p3]);console.log('clear the loading~');
}// 错误写法:以下写法不能实现同步请求,必须等待第一个await接收到sleep的解决才会执行第二个await
async function bugDemo() {await sleep(1000)await sleep(1000)await sleep(1000)console.log('clear the loading~')
}correctDemo()
bugDemo()

错误处理:

处理错误

function sleep(second) {return new Promise((resolve, reject) => {setTimeout(() => {reject('want to sleep~');}, second);})
}async function errorDemoSuper() {try {let result = await sleep(1000);console.log(result);} catch (err) {console.log(err); // 当await等待的结果为reject时执行}
}errorDemoSuper() // 输出:want to sleep~

捕捉错误:

// 定义个抛出异常的方法
function errorTest(second) {throw new Error('抛出一个异常!!!')
}

方式1:通过 try … catch捕获

try {errorTest()
}catch(error){console.log(error)  
}

方式2: 在then回调中捕获

errorTest().then(resolve => console.log(resolve),error => console.log(error)   
)

方式3:在Promise的catch中捕获

errorTest().catch(error => console.log(error)
)

相关内容

热门资讯

埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
猫咪吃了塑料袋怎么办 猫咪误食... 你知道吗?塑料袋放久了会长猫哦!要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...
脚上的穴位图 脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用,包括头部穴位图、胸部穴位图、背部穴位图、胳...
demo什么意思 demo版本... 618快到了,各位的小金库大概也在准备开闸放水了吧。没有小金库的,也该向老婆撒娇卖萌服个软了,一切只...
世界上最漂亮的人 世界上最漂亮... 此前在某网上,选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中,人们投票选出了心目中最美...
埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...