async/await —— 异步编程终极解决方案

2022-12-19 0 1,007

产品目录

async和一般表达式的差别awaitasync/await处置多反弹触发器async和await要相互配合采用有关await采用中严重错误的处置M1:try-catchM2:.catchM3:三个回到值(参照node)

async和一般表达式的差别

// 一般表达式 function fuc() { return 27 } console.log(fuc()); // 27 //async表达式async function firstAsync() { return 27 } console.log(firstAsync()) // Promise {<resolved>: 27} // 回到了两个promise第一类,将27回到到resolve里头 // 相等于 –> async function firstAsync() { return Promise.resolve(27) } firstAsync().then(val => { console.log(val) // 27 }) console.log(firstAsync() instanceof Promise) // true 可以对async回到的第一类进行判断

await

下面表达式如何可以按照顺序执行?

async function firstAsync() { // 声明触发器操作,执行完毕之后才能执行下面的表达式 let promise = new Promise((resolve,reject) => { setTimeout(() => { resolve(now it is done) }, 1000) }) // 执行触发器操作 promise.then(val => { console.log(val) }) console.log(2) return 3 } firstAsync().then(val => { console.log(val) }) //2 //3 //now it is done

采用await

async function firstAsync() { // 声明触发器操作,执行完毕之后才能执行下面的表达式 let promise = new Promise((resolve,reject) => { setTimeout(() => { resolve(now it is done) }, 1000) }) // 执行触发器操作 let result = await promise console.log(result) console.log(2) return 3 } firstAsync().then(val => { console.log(val) }) //now it is done //2 //3

await promise 是两个表达式,后面要要跟promise第一类,如果不是会自动处置成promise第一类

console.log(await promise) //now it is done —有回到值 console.log(await 40) //40console.log(await promise.resolve(40)) //40

async/await处置多反弹触发器

ES2017提供的Async/Await是标准的触发器程式设计语法

如果遇到多反弹的promise,简化可以采用async

// Promise chain ajax(/api/url1) .then(value => { return ajax(ajax/url2) }) .then(value => { return ajax(ajax/url3) }) .then(value => { return ajax(ajax/url4) }) .catch(error => { console.error(error) })

上面的代码可以这么写,效果和语法都是和generator是一样的,不用定义执行器,简单便捷,推荐采用。

async function main () { try{ const users = await ajax(/api/users.json) console.log(users) const posts = await ajax(/api/posts.json) console.log(posts) const urls = await ajax(/api/urls.json) console.log(urls) } catch (e) { //捕获异常 console.log(e) } } main()

async和await要相互配合采用

否则会报错

有关await采用中严重错误的处置

如果不对await进行严重错误处置,则会阻断程序执行。

await采用中,如果promise第一类回到resolve,则回到什么值就是什么值,包括undefined。

但是如果回到reject,则回到值回到undefined,从catch表达式中可以接收到。

第一种处置方法:try-catch

优点:简洁明了,所有报错都到catch里头处置,不需要对await回到值进行判断缺点:本身try-ca
// 定义两个表达式,回到promise第一类 function firstAsync() { return new Promise((resolve,reject) => { const a = 0; if(a){ resolve(1) }else{ reject(2) } }) } async function hello () { // 判断是否有报错 try{ const res = await firstAsync() console.log(res) }catch(err){ console.log(“err”) console.log(err) } }

第二种处置方法:.catch

优点:代码优雅,适合对await表达式进行触发器严重错误处置缺点:需要对回到值再进行一次判断。
// 定义两个表达式,回到promise第一类 function firstAsync() { return new Promise((resolve,reject) => { const a = 0; if(a){ resolve(1) }else{ reject(2) } }) } async function hello () { // 判断是否有报错 const res = await firstAsync().catch(err =>{ console.log(“err”) console.log(err) }) if(res){ //TODO } } hello();

第三种处置方法,三个回到值

优点:统一严重错误处置可以在定义的表达式内执行,await调用只需要对回到值进行判断即可,不需要单独进行catch处置缺点:回到值是三个,不容易管理
const awaitWrap = () => { let promise = new Promise((resolve,reject) => { const a = 0; if(a){ resolve(1) }else{ reject(2) } }) return promise .then(data => [data, null]) .catch(err => { // 通用严重错误处置写这里 TODO return [null,err] }) } async function he() { const [data, err] = await awaitWrap(); if(data){ //如果是reslove走这里 console.log(data) }else{ //如果是reject走这里 console.log(“error”) console.log(err) //特殊严重错误处置写这里 TODO } } he();

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务