产品目录
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();