【JavaScript基础】一文理解async/await

JavaScript基础

【JavaScript基础】手写instanceof、new、深拷贝、浅拷贝实现

---

前言

今天学习了async/await的作用与用法，于是写了这篇文章

---

一、async/await是什么

async/await其实是Generator 的语法糖，它能实现的效果都能用then链来实现，它是为优化then链而开发出来的。通过async关键字声明一个异步函数， await 用于等待一个异步方法执行完成，并且会阻塞执行。
async 函数返回的是一个Promise对象，如果在函数中 return 一个变量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。如果没有返回值，返回 Promise.resolve(undefined)

二、用法

1.使用async修饰函数

使用async修饰的函数即为异步函数，它不会阻塞后面代码的执行(指这个函数后面的代码，非函数内部代码)

let test = async function(){
    return 1
}
let test1 = async function(){}
console.log(test()) //Promise { 1 }
console.log(test1()) //Promise { undefined }

使用async修饰的函数在有返回值时会把返回值包装成Promise返回；没有返回值时会返回一个Promise包装的undefined

2.await

使用await修饰的函数会阻塞后续代码的执行(指该行代码后面的代码)
注意：await必须配合async使用，不能单独使用，并且只能在用async修饰的函数内使用

let test = async function(){
    return 1
}
let test1 = async function(){}

let test2 = async function(){
    let x = await test()
    console.log('test1执行完成=>', x)
    return x
}
//test2()本身是异步函数，不会阻塞后续代码执行
//但 await会阻塞后面代码执行，所以这里会返回pending，表示未完成
console.log(test2())  //Promise { <pending> }
console.log(test1()) //Promise { undefined }
//最后还会打印 test1执行完成=> 1 
// 因为异步函数不阻塞后续代码，所以后面的test1()会继续执行而不会等test2执行完成
// 等到test2里的test函数执行完后才继续执行await后的代码,然后打印

三.使用场景

1. 不想等待函数执行完成，而是继续往下执行时，单独使用async
2. 在请求中想等待结果返回后再往下执行时，使用async修饰函数，并且使用await修饰请求的方法

---

总结

总的来说async/await使用还是挺简单的，合理的使用能让我们的开发效率更好，代码更简洁好维护。
如果文章内容有错误，欢迎指正！
最后希望这篇文章能帮助到你！