js—async和awit的一些理解

大家好，欢迎来到IT知识分享网。

一、async函数的执行（async关键字意思表示为异步）

async函数体里没有搭配await关键字使用时，async函数的执行和普通函数一致

 async function fn1() { console.log("我是async异步函数"); } function fn2() { console.log("我是普通函数"); } fn1() fn2()

 控制台执行：

 async函数体里搭配await关键字使用时，async函数体执行遇到await关键字时，await会阻塞async函数体继续往下执行，await往下的代码会被进入异步任务队列中等待主线程执行完毕后再执行

案例1：

 控制台执行：

案例2：

控制台执行：

 二、async函数的返回值

 async函数的返回值全为Promise对象：

 1、当函数体内返回Promise对象时，那么async函数的返回值跟函数体内返回Promise对象保持一致

①promise对象为等待状态

 async function fn() { return new Promise((reslove, rejiect) => { //不调用reslove或者reslove函数，那么promise会一直为等待状态 }) } let result = fn() console.log(result);

执行：

②promise对象为失败状态

 async function fn() { return new Promise((reslove, reject) => { setTimeout(() => { //模拟异步请求后端数据，超过了3秒后请求超时 reject("请求超时") }, 3000) }) } let result = fn() console.log(result);

执行：

③promise对象为成功状态

 async function fn() { return new Promise((reslove, rejiect) => { setTimeout(() => { //模拟异步请求后端数据，1秒钟后端数据返回 reslove('后端数据') }, 1000) }) } let result = fn() console.log(result);

执行：

 2、当函数体内返回不是Promise对象时，那么async函数会调用Promise.reslove()封装函数体的返回，保证async函数返回为promise对象

①函数无返回值时默认返回undefined

 async function fn() { } let result = fn() console.log(result);

执行：

② 函数返回值为普通数据（字符串，数值，布尔值，对象…）

 async function fn() { return 1 // return '哈哈哈' // return true // return [1, 2, 3] // return { name: 'hsq' } // return function () { // console.log("hsq"); // } } let result = fn() console.log(result);

执行：

 三、await运算符的搭配

注意：await运算符一定要在async函数里使用，一般我们使用await + promise对象搭配使用,获取promise对象为成功的结果值

1、await其实就是一个运算符，获取运算成功的值，await后面搭配表达式，

①await 表达式（非promise对象）

案例：

 async function fn() { // let result = await 1 // let result = await 1 + 1 // let result = await 'hsq' // let result = await function () { // console.log('函数'); // } // let result = await [1, 2, 3] let result = await { name: 'hsq' } console.log(result); } fn()

执行：

② await 表达式（promise对象）

await + promise对象运行结果返回promise对象状态为成功的的结果值

案例：

②peomise对象为等待

 async function fn() { let result = await new Promise((reslove, reject) => { }) console.log(result); } fn()

执行：

ps: promise对象为等待时，await + promise对象运行结果无法获取结果

②peomise对象为失败

 async function fn() { let result = await new Promise((reslove, reject) => { setTimeout(() => { reject("失败") }, 1000) }) // .catch(res => { // console.log(res); // }) console.log(result); } fn()

执行：

ps:当promise对象为失败时，线程会抛出异常， await + promise对象运行结果无法返回promise对象状态为失败的的结果值，可以通过promise的.catch()方法获取promise失败的结果值

③peomise对象为成功

 async function fn() { let result = await new Promise((reslove, reject) => { setTimeout(() => { reslove("成功获取的数据") }, 1000) }) console.log(result); } fn()

执行：

 ③别忘了async函数的返回值为promise对象，可以搭配await使用

案例：

 async function getData() { return new Promise((reslove, reject) => { setTimeout(() => { reslove("成功获取后端返回数据") }, 1000) }) } async function useData() { let result = await getData() console.log(result); } useData()

执行：

四、总结

 1、async表示异步，async函数执行时遇到await只会阻塞自己函数体内代码的执行，不会阻塞主线程代码的执行，所以称为异步函数

2、await只能存在在async异步函数中，我们一般使用async+await+promise进行异步编程，await+promise只能获取promise对象为成功时的结果值，promise对象为失败时的结果值只能通过捕获异常的方式获取。

五、补充

async函数里遇到await之前的代码是同步里的，遇到await时，会把await下面的代码放入微任务队列，并且退出这个async函数，当主线程空闲时再执行微任务队列的代码