今天我们用node试试async和await进行异步编程。
Node.JS官方文档:https://nodejs.dev/en/
创建异步函数,并返回相关数值:
一般方式创建
/*
函数直接通过返回Promise成为异步函数
异步函数:返回promise的函数称之为异步函数
*/
function fn(){
return Promise.resolve(10)
}
// 读取结果需要通过then去读取
fn().then(r => {
console.log(r)
})
通过async方式创建:
/*
通过async可以快速的创建异步函数
*/
/*
通过async可以来创建一个异步函数,fn2() 此时就是一个异步函数
异步函数的返回值回自动封装到一个Promise中返回
*/
async function fn2(){
return "async返回的数据10"
}
// 读取结果需要通过then去读取
fn2().then(r => {
console.log(r)
})
在async声明的函数中可以使用await关键字来调用异步函数
/*
在async声明的异步函数中可以使用await关键字来调用异步函数
*/
// 创建一个函数计算 a + b的结果,但是异步,即返回的Promise
function sum(a, b){
return new Promise(resolve => {
setTimeout(() => {
resolve(a + b)
}, 2000)
})
}
// 通过async创建一个异步函数
async function fn3() {
sum(123, 456).then(r => {
console.log(r)
})
}
// 调用fn3()
fn3()
-
当我们通过await去调用异步函数时候,它会暂停代码的运行
-
直到异步代码执行有结果时,才会将结果返回
-
注意 await只能用于 async声明的异步函数中,或者es模块的紧急作用域中
-
await阻塞的只是异步函数内部的代码,不会影响外部代码
-
通过 await 调用异步代码时,需要通过try-catch来处理异常
/*
在async声明的异步函数中可以使用await关键字来调用异步函数
*/
// 创建一个函数计算 a + b的结果,但是异步,即返回的Promise
function sum1(a, b){
return new Promise(resolve => {
setTimeout(() => {
resolve(a + b)
}, 2000)
})
}
/*
Promise解决了异步调用中回调函数问题
虽然通过链式调用解决了回调地狱,但是链式调用太多以后还是不好看
但现在要求以同步的方式去调用异步的代码
*/
async function fn4() {
// 链式调用
// sum1(123, 456)
// .then(r => sum(r, 8))
// .then(r => sum(r, 8))
// .then(r => console.log(r))
// 当我们通过await去调用异步函数时候,它会暂停代码的运行
// 直到异步代码执行有结果时,才会将结果返回
// 注意 await只能用于 async声明的异步函数中,或者es模块的紧急作用域中
// await阻塞的只是异步函数内部的代码,不会影响外部代码
// 通过 await 调用异步代码时,需要通过try-catch来处理异常
try{
let result = await sum(123, 456)
result = await sum(result, 8)
result = await sum(result, 9)
console.log(result)
}catch(e){
console.log("出错了")
}
// awwit阻塞的是异步函数内部的代码
// console.log(123)
// console.log(222)
// console.log(333)
}
// 调用fn3()
fn4()
// await不会阻塞外部代码
console.log("外部代码")
如果async声明的函数没有写await,那么它就会依次执行。
// 如果async声明的函数中没有写await,那么它里面就会依次执行
async function fn4(){
console.log(1)
console.log(2)
console.log(3)
console.log(4)
// 如果有return
return 10
}
fn4()
// fn4等价于fn5
function fn5() {
return new Promise(resolve => {
console.log(1)
console.log(2)
console.log(3)
console.log(4)
resolve(10) // return放在resolve中 fn4如果没有返回值,resolve就为空
})
}
fn5()
console.log(5) // 执行结果 1 2 3 4 5 1 2 3 4 5 6
使用await调用函数后,await当前函数后的所有代码,会先进入微任务队列
await后的所有代码,都会放入到微任务队列中执行
// 同步代码前加await
async function fn6(){
console.log(111)
/*
当我们使用await调用函数后,await当前函数后的所有代码
会在await当前函数执行完毕后,被列入微任务队列中
*/
await console.log(112)
// await后的所有代码,都会放入到微任务队列中执行
console.log(113)
}
fn6()
console.log(222) // 执行结果为 111 112 222 113
// 等价于
function fn7() {
return new Promise(resolve => {
console.log(111)
// 上面的在此处加了await
console.log(112)
resolve()
}).then(r => {
console.log(113)
})
}
大家可以去试试吧。