JavaScript中async/await的使用

本文详细介绍了JavaScript中的async/await特性,它们如何使异步代码看起来更像同步,以及它们与Promise的关系,包括异步函数执行、错误处理和在实际场景中的应用,如串行操作、API请求和数据处理。
摘要由CSDN通过智能技术生成

async/await 是 JavaScript 中用于处理异步操作的一种语法糖,它使得异步代码看起来像同步代码一样直观和易读。它是用同步的语法写异步的代码。

1. 基础概念

    一,async:关键字用于声明一个函数是异步的。一个标记为 async 的函数总是返回一个 Promise 对象。

    二,await:关键字仅能在 async 函数内部使用,用于等待一个 Promise 完成并返回其结果。它会暂停当前的 async 函数的执行,直到 Promise 完成,然后继续执行 async 函数,并返回解析后的 Promise 值。

2.async和await与Promise的关系

1,执行async函数,返回的是一个promise对象
2,await相当于promise的then
3,try...catch可捕获异常,代替了Promise的catch
<script>
    async function fn(){
        return "张三"//在这里直接return相当于Promise.resolve("张三")
    }
    console.log(fn())
</script>

直接使用async它返回的是一个Promise对象,

在使用then来看一下,这里的res还是等于return的这个值

<script>
    async function fn(){
        //return "张三"
        return Promise.resolve("张三")
    }
    console.log(fn())//返回的还是Promise
    fn().then(res=>{
        console.log(res)//这里的结果还是为张三
    })
</script>

在立即执行函数中的情况

 (async function f() {
        const f1 = Promise.resolve("李四")
        //这里的结果是返回值
        const result = await f1;
        console.log(result)//李四
    })();

又或者

    (async function f() {
        //这里的结果是返回值
        const result = await "李四";
        console.log(result)//李四
    })();

使用try...catch捕获异常

     (async function f() {
        let res = Promise.reject("error")
        const result = await res
        console.log(result)//李四
    })();

如果Promise.reject页面直接报错

使用后的try...catch可以正常输出

   (async function f() {
        let res = Promise.reject("error")
        try {
            const result = await res;
            console.log(result)//李四
        }catch (e) {
            console.log(e)
        }
        console.log("success")
    })();

调用一个函数

<script>
    function timeOut() {
        return new Promise(resolve => {
            setTimeout(()=>{
                console.log("hi")
                resolve()
            },1000)
        })
    }
    async function fn() {
        timeOut();
        console.log('result')
    }
    fn()
    //结果,先输出result在输出hi
</script>

加上await

<script>
    function timeOut() {
        return new Promise(resolve => {
            setTimeout(()=>{
                console.log("hi")
                resolve()
            },1000)
        })
    }
    async function fn() {
        await timeOut();
        console.log('result')
    }
    fn()
    //加上await之后,需要先等待timeout执行完成之后在在执行下面的
    //输出为hi  result
</script>

带返回值的情况

<script>
    function timeOut() {
        return new Promise(resolve => {
            setTimeout(()=>{
                console.log("hi")
                resolve('async await')
            },1000)
        })
    }
    async function fn() {
        let res=await timeOut();
        console.log(res)
        console.log('result')
    }
    fn()
    //先输出hi在输出res,然后是result
</script>

3.async和await的应用

1,执行串行操作

<script>
    function timeOut1() {
        return new Promise(resolve => {
            resolve(1)
        })
    }
    function timeOut2(){
        return 2
    }
    function timeOut3(){
        return 3
    }
    async function fn() {
        let res1=await timeOut1();
        console.log(res1)
        let res2= await timeOut2()
        console.log(res2)
        let res3= await timeOut3()
        console.log(res3)
        console.log('result')
    }
    fn()
    //分别输出1,2,3和result
</script>

2,当你需要从外部 API 获取数据时,可以使用 async 和 await 来等待响应。

async function fetchData() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  return data;  
}

3,当需要从一个异步函数返回一个值,并在另一个异步函数中使用这个值时,可以使用 async 和 await

<script>
    async function fetchData() {
        const response = await fetch('https://api.demo.com/data');
        const data = await response.json();
        return data;
    }

    async function processData() {
        const data = await fetchData();
        // 对 data 进行处理  
        console.log(data);
    }

    processData();
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值