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的then3,try...catch可捕获异常，代替了Promise的catch

    async function fn(){        return "张三"//在这里直接return相当于Promise.resolve("张三")    }    console.log(fn())

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

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

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

在立即执行函数中的情况

 (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")    })();

调用一个函数

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

加上await

    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

带返回值的情况

    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

3.async和await的应用

1，执行串行操作

    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

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

    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();