async与awite详解

原创已于 2023-05-12 16:37:19 修改 · 2.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #node.js

于 2021-10-02 01:05:59 首次发布

本文详细介绍了JavaScript中async和await的使用，揭示了如何将异步代码写得更像同步代码，避免回调地狱。通过示例展示了async函数返回Promise对象的特性，以及当async函数不返回Promise或抛出错误时的情况。同时，解释了await关键字只能在async函数内部使用，它会等待Promise完成并返回结果。最后，阐述了如何利用async/await进行异步请求的封装。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

async和await能够使我们的异步代码书写，更像是在使用同步代码那样，不会出现层层嵌套

我们使用scync函数要明白两点首先async函数自身返回值是一个promise对象； async函数自身返回的这个promise对象的结果是由async函数的返回值所控制的；话不多说，直接上代码。

1，async使用

// promise类型对象有两个值，[[promistStatus]]返回对象的状态，[[promiseValue]]返回对象的值

async function fn(){
    return;
}
let result = fn()
console.log(result); //返回一个promise对象，[[promistStatus]]为resolved，[[promiseValue]]为undefind

async function fn1(){
    return '加油';
}
let result = fn1()	
console.log(result);//返回一个promise对象，[[promistStatus]]为resolved，[[promiseValue]]为'加油'

async function fn2(){
    throw new Error('出错了');
}
let result = fn2();////返回一个promise对象，[[promistStatus]]为rejucted，[[promiseValue]]为错误信息

async function fn3(){
    return new Promise((resolve,reject)=>{
        resolve("成功信息");
    })
}
let result = fn3();////返回一个promise对象，[[promistStatus]]resolve，[[promiseValue]]为成功信息

async function fn4(){
    return new Promise((resolve,reject)=>{
        reject("失败信息");
    })
}
let result = fn4();////返回一个promise对象，[[promistStatus]]reject，[[promiseValue]]为失败信息

// 只要ascnc函数不去return一个promise对象，那么async函数自身返回的promise对象的状态都是成功的，值为我们返回的值, 除非像    //	fn2()函数抛出错误。
// 如果async返回了一个promise对象，那么async返回promise对象的结果就是我们返回的promise对象

2，await结合async使用

await不可以单独使用，必须在async函数内部使用，而awite返回值是promise成功或失败的结果

//创建一个promise对象 
let  p  =  new Promise((resolve,reject)=>{
                resolve("p成功返回值");
 })
 let p1  =  new Promise((resolve,reject)=>{
                reject("p1失败返回值");
 })
async function fn3(){
    let a = await p();
    let b = await p1();
    console.log(a); //"p成功返回值"
    console.log(b); //"p1失败返回值"
}
// 然后我们就可以结合async去封装一些异步请求了