背景
背景就是遇到了一个比较烦人的模块,里面的涉及到了大量的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 world
ii:因为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 world
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)
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 world
async function timeout(ms,b=2) {
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 world',5s后打印 '打印时机'
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)})
// 123
async function f() {
return 123
}
f().then(e => {console.log(e)})
// 123
async 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)})
// undefined
await 知识点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
// hello1
async 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()
// 出错了 hello
3、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()
// 出错了 hello
myName()返回一个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: 出错了
使用setTimeout模仿异步参考如下
function t() {
return new Promise((resolve,reject)=> {
setTimeout(resolve, 5000)
})
}
function y() {
return new Promise((resolve,reject)=> {
setTimeout(resolve, 5000)
})
}
async function f() {
await t()
console.log("执行了")
await y()
console.log("执行了2")
}
f()
// 5后打印“执行了”,之后又5s打印“执行了2”
new Promise里面的函数是同步执行的,只有当promise有状态的时候才能被await等待到,继续往下走
function t() {
return new Promise((resolve,reject)=> {
setTimeout(resolve, 5000)
console.log(11)
})
}
function y() {
return new Promise((resolve,reject)=> {
setTimeout(resolve, 5000)
console.log(22)
})
}
async function f() {
await t()
console.log("执行了")
await y()
console.log("执行了2")
}
f()
// 会立即 打印“11”,5s后打印“执行了”,之后立即打印“22”,5s后打印“执行了2”
让继发执行,变为并发执行
1、不作为就行了,不要用async 和await修饰。
2、利用Promise.all()方法,如下:
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
对Promsie.all方法进行解释说明:
Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
上面代码中,Promise.all()方法接受一个数组作为参数,p1、p2、p3都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为 Promise 实例,再进一步处理
const p = Promise.all([p1, p2, p3]);
以下代码,这时三个db.post()操作将是并发执行,也就是同时执行,而不是继发执行
function dbFuc(db) { //这里不需要 async
let docs = [{}, {}, {}];
// 可能得到错误结果
docs.forEach(async function (doc) {
await db.post(doc);
});
}
以下代码,这时三个db.post()操作将是继发执行文章来源:https://www.toymoban.com/news/detail-590034.html
async function dbFuc(db) {
let docs = [{}, {}, {}];
for (let doc of docs) {
await db.post(doc);
}
}
补充
1、new Promise 里面的是同步执行的,resolve是异步,这个resolve执行后,外界才能在这个promise的then方法里拿值
2、promise.then 执行完是个promise,并且可以通过then方法接受then方法里return出去的值
3、new promise没有reslove出去值,使用then方法去获取异步后的结果,是拿不到的。promise resolve出去什么值,就在promise.then里获取到什么值文章来源地址https://www.toymoban.com/news/detail-590034.html
function t() {
return new Promise((resolve,reject)=> {
setTimeout(resolve, 5000)
console.log(11)
return 4444
})
}
let r = t().then(function(val) {
console.log("结果",val)
return 9999
})
console.log("r",r)
r.then(val => console.log("ll",val))
// 11 --- 立即执行
// r Promise { <pending> } --- 立即执行
// 结果 undefined --- 5s后
// ll 9999 --- 5s后
到了这里,关于你真的会用async和await么?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!