JavaScript中async/await的使用

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>