移除 wordpress 评论的,济南百度整站seo推广,怎么生成网址链接,杭州专业程序开发公司async函数搞懂 背景asyncawaitawait 知识点1await 知识点2await 知识点三await 知识点四await 知识点五 背景
背景就是遇到了一个比较烦人的模块#xff0c;里面的涉及到了大量的async 和 awiat。发现大多人对这个语法糖一知半解#xff0c;然后大量的滥用#xff0c;整理一… async函数搞懂 背景asyncawaitawait 知识点1await 知识点2await 知识点三await 知识点四await 知识点五 背景
背景就是遇到了一个比较烦人的模块里面的涉及到了大量的async 和 awiat。发现大多人对这个语法糖一知半解然后大量的滥用整理一下
async
前置知识 Promise.resolve(foo) new Promise(resolve resolve(foo))Promise.reject(foo) new Promise((resolve, reject) reject(出错了))1、async修饰的函数返回一个promise
async function myName() {let result await Promise.resolve(hello)let result1 await Promise.resolve(hello1)console.log(result)console.log(result1)
}
myName().then(e console.log(e))
//hello
//hello1
//undefined (函数没有返回任何的值所以是undefined)---------------------
async function myName() {let result await Promise.resolve(hello)let result1 await Promise.resolve(hello1)return ({result,result1})
}
myName().then(e console.log(e))
// { result: hello, result1: hello1 }2、async返回的是一个promise当async中发生错误这个错误会使返回的promise变为reject状态从而可以被catch捕捉到
async function sayHi() {throw new Error(抛出一个错误)
}
// 以下四种写法是等价的
sayHi().then(e console.log(e),e console.log(e))
sayHi().then(undefined,e console.log(e))
sayHi().then().catch(res console.log(res))
sayHi().catch(res console.log(res))3、注意以下用法以下用法在项目中使用是极多的
i以下的这种写法就很好理解了没问题的
function timeout(ms) {return new Promise((resolve) {setTimeout(resolve, ms);});
}
async function asyncPrint(value, ms) {await timeout(ms);console.log(value);
}asyncPrint(hello world, 50)
// hello worldii因为async返回一个promise所以下述写法完全等同于i的写法
async function timeout(ms) {await new Promise((resolve) {setTimeout(resolve, ms);});
}
async function asyncPrint(value, ms) {await timeout(ms);console.log(value);
}
asyncPrint(hello world, 50)
// hello worldasync function timeout(ms) {await new Promise((resolve) {setTimeout(resolve, ms);});console.log(8888)
}
async function asyncPrint(value, ms) {let res timeout(ms)console.log(res) console.log(value);
}
asyncPrint(hello world, 50)
// Promise { pending }
// hello world
// 8888
async function timeout(ms) {await new Promise((resolve) {setTimeout(resolve, ms);});console.log(8888)
}async function asyncPrint(value, ms) {let res timeout(ms)console.log(res) await timeout(ms);console.log(value);
}
asyncPrint(hello world, 50)
//Promise { pending }
// 8888
// 8888
// hello worldasync function timeout(ms,b2) {await new Promise((resolve) {setTimeout(resolve, ms);});console.log(8888,b)
}async function asyncPrint(value, ms) {let res timeout(ms,9)console.log(res) await timeout(ms,6);console.log(value);}
asyncPrint(hello world, 5000)
//Promise { pending }
//8888 9
//8888 6
//hello worl以下对比async await 修饰的A函数内部执行时序肯定是可控的但是如果想要在 另一个函数B中也可控也就是B中调用了A想让A执行完在执行B的一些逻辑那么就需要用awiat来修饰A
async function timeout(ms) {await new Promise((resolve) {setTimeout(resolve, ms);});
}
async function asyncPrint(value, ms) {await timeout(ms);console.log(value);
}
asyncPrint(hello world, 5000);
// 5s后会打印 hello world
-------------------------------
async function timeout(ms) {await new Promise((resolve) {setTimeout(resolve, ms);});
}
function asyncPrint(value, ms) {timeout(ms);console.log(value);
}
asyncPrint(hello world, 5000);
// 直接就打印hello world并不等5s
-----------------------
async function timeout(ms) {await new Promise((resolve) {setTimeout(resolve, ms);});console.log(打印时机)
}
function asyncPrint(value, ms) {timeout(ms);console.log(value);
}
asyncPrint(hello world, 5000);
// 立马打印hello world5s后打印 打印时机await
await命令只能用在async函数之中用在普通函数中会报错
await 知识点1
await 命令后面是一个promise对象可以返回这个promise的resolve时的结果并且可以接收但是reject时就不可以接收到了会报错可以利用try catch捕捉到reject的结果或者使用promise的catch可以捕捉到await后面是简单数据或者负责数据其实都相当于直接把该值给return出来
async function f() {return await 123
}
f().then(e {console.log(e)})
// 123async function f() {return 123
}
f().then(e {console.log(e)})
// 123async function f1() {return await {sex: man}
}
f1().then(e {console.log(e)})
// { sex: man }async function f2() {await {sex: man}
}
f2().then(e {console.log(e)})
// undefinedawait 知识点2
await后面的promise失败了如何获取到这个失败的值。async里面如果有多个await修饰的promise返回的resolve的promis并不会阻塞会继续往下走但是遇到reject的promise就会直接return出去有时我们甚至不需要写return
async function f() {return await Promise.resolve(对了);
}
f()
.then(v console.log(v))
.catch(e console.log(e))
// 对了await语句前面没有return但是reject方法的参数依然传入了catch方法的回调函数。这里如果在await前面加上return效果是一样的。
async function f() {await Promise.resolve(对了);await Promise.reject(出错了);
}f()
.then(v console.log(v))
.catch(e console.log(e))
// 出错了async function f() {await Promise.reject(出错了);
}f()
.then(v console.log(v))
.catch(e console.log(e))
// 出错了async function f() {return await Promise.reject(出错了);
}f()
.then(v console.log(v))
.catch(e console.log(e))
// 出错了await 知识点三
await修饰异步在async中使用当promise是resolve时接着往下走任何一个await语句后面的 Promise 对象变为reject状态那么整个async函数都会中断执行。
1、awiat直接用只能接收resolve返回的参数
async function myName() {let result await Promise.resolve(hello)let result1 await Promise.resolve(hello1)console.log(result)console.log(result1)
}
myName()
// hello
// hello1async function myName1() {let result await Promise.reject(hello)console.log(result)
}
myName1()
// 报错了
------------
async function myName1() {let result await Promise.reject(hello)console.log(111111111111111)console.log(result)
}
myName1()
// 报错了console都没走2、搭配 try catch 可以用 catch捕捉到reject的错误
async function myName2() {try {let result await Promise.reject(hello)console.log(result)} catch (error) {console.log(出错了,error)}
}
myName2()
// 出错了 hello3、try catch try内之要有一个promise reject那么后续的就都不会进行了直接将第一个reject给catch给出去了
async function myName2() {try {let result await Promise.reject(hello)console.log(result)let result1 await Promise.resolve(hello word)console.log(result1)} catch (error) {console.log(出错了,error)}
}
myName2()
// 出错了 hello
----------------------------------------
// 下方demo为了证明报错后没有再往后走
async function myName2() {try {await Promise.reject(hello)console.log(走不走)let result1 await Promise.resolve(hello word)console.log(result1)} catch (error) {console.log(出错了,error)}
}
myName2()
// 出错了 hellomyName返回一个promise这个promise是reject所以 f函数里的await后面修饰的也就是一个失败的reject了
async function myName() {throw new Error(抛出一个错误);
}
async function f() {await myName()
}f()
.then(v console.log(v))
.catch(e console.log(e))
// Error: 抛出一个错误await 知识点四
如何解决一个async函数中有多个await而当一个await reject时怎么保证接下来的await继续往下走当然这种场景一般是不会存在哈如果前后异步没有依赖的话学到个名次这种关系叫做—继发为何要控制他们时序呢正是因为有依赖所以才要控制时序既然有依赖关系第一个失败了按道理后续就是不应该继续执行了
// 上述演示过这个场景可以看到只要一个错误就不往下走了
// 任何一个await语句后面的 Promise 对象变为reject状态那么整个async函数都会中断执行
async function f() {await Promise.reject(出错了)console.log(判断是否走不走)await Promise.reject(接着出错)
}
f().then().catch(e console.log(e))
// 出错了思路 用catch处理一下reject将错误处理一下那么catch就不会暴露出去了
解决方案1
async function k() {try {await Promise.reject(出错了)}catch(e) {console.log(e)}try {await Promise.reject(出错了1)}catch(e) {console.log(e)}await Promise.reject(接着出错)
}
k().catch(e console.log(e))
// 出错了
// 出错了1
// 接着出错解决方案2
async function l() {await Promise.reject(出错了).catch(e console.log(e))await Promise.reject(出错了1).catch(e console.log(e))await Promise.reject(出错了2).catch(e console.log(e))await Promise.reject(接着出错)
}
l().catch(e console.log(e))
//出错了
//出错了1
//出错了2
//接着出错await 知识点五
问await后面的错误如何处理 答如果await后面的异步操作出错那么等同于async函数返回的 Promise 对象被reject
sync function y() {await new Promise((resolve,reject) {throw new Error(出错了)})
}
y().catch(e console.log(e))
// Error: 出错了错误捕捉获取上面也提到了分为两种1、try catch 2、用catch捕捉
async function j() {await new Promise((resolve,reject) {throw new Error(出错了)}).catch(e console.log(e))
}
j()
// Error: 出错了async function j() {try {await new Promise((resolve,reject) {throw new Error(出错了)})} catch(e) {console.log(e)}
}
j()
// Error: 出错了分割线------------------------------------------------------ function name() {try {throw new Error(出错了);console.log(1111);} catch (e) {console.log(e);}}如果抛出错误 throw new Error 就不在往下走了不会执行执行打印走到了catch async onSubmit() {this.lastClickEvent this.CLICK_EVENT.ADD;try {await this.commonAdd();this.$message({type: success,message: this.$t(msg_success)});if (this.isClient) {this.SynchronizeResourceUpdate();}if (!this.accessGuide) {this.back();}} catch (error) {console.log(error);}},commonAdd如果有throw new Error也就不往下走了try catch被中断
