/*
    函數(shù)直接通過返回Promise成為異步函數(shù)
    異步函數(shù)：返回promise的函數(shù)稱之為異步函數(shù)
*/ 
function fn(){
    return Promise.resolve(10)
}
// 讀取結果需要通過then去讀取
fn().then(r => {
    console.log(r)
})

/*
    通過async可以快速的創(chuàng)建異步函數(shù)
*/
/*
    通過async可以來創(chuàng)建一個異步函數(shù)，fn2() 此時就是一個異步函數(shù)
        異步函數(shù)的返回值回自動封裝到一個Promise中返回
*/
async function fn2(){
    return "async返回的數(shù)據(jù)10"
}
// 讀取結果需要通過then去讀取
fn2().then(r => {
    console.log(r)
})

 
/*
    在async聲明的異步函數(shù)中可以使用await關鍵字來調用異步函數(shù)
*/
// 創(chuàng)建一個函數(shù)計算 a + b的結果，但是異步，即返回的Promise
function sum(a, b){
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(a + b)
        }, 2000)
    })
}
// 通過async創(chuàng)建一個異步函數(shù)
async function fn3() {
    sum(123, 456).then(r => {
        console.log(r)
    })
}
// 調用fn3()
fn3()

/*
    在async聲明的異步函數(shù)中可以使用await關鍵字來調用異步函數(shù)
*/
// 創(chuàng)建一個函數(shù)計算 a + b的結果，但是異步，即返回的Promise
function sum1(a, b){
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(a + b)
        }, 2000)
    })
}
/*
    Promise解決了異步調用中回調函數(shù)問題
        雖然通過鏈式調用解決了回調地獄，但是鏈式調用太多以后還是不好看
        但現(xiàn)在要求以同步的方式去調用異步的代碼
*/
async function fn4() {
    // 鏈式調用
    // sum1(123, 456)
    //     .then(r => sum(r, 8))
    //     .then(r => sum(r, 8))
    //     .then(r => console.log(r))
    // 當我們通過await去調用異步函數(shù)時候，它會暫停代碼的運行
    // 直到異步代碼執(zhí)行有結果時，才會將結果返回
    // 注意 await只能用于 async聲明的異步函數(shù)中，或者es模塊的緊急作用域中
    // await阻塞的只是異步函數(shù)內部的代碼，不會影響外部代碼
    // 通過 await 調用異步代碼時，需要通過try-catch來處理異常
    try{
        let result = await sum(123, 456)
        result = await sum(result, 8)
        result = await sum(result, 9)
        console.log(result)
    }catch(e){
        console.log("出錯了")
    }
    // awwit阻塞的是異步函數(shù)內部的代碼
    // console.log(123)
    // console.log(222)
    // console.log(333)
}
// 調用fn3()
fn4()
// await不會阻塞外部代碼
console.log("外部代碼")

// 如果async聲明的函數(shù)中沒有寫await，那么它里面就會依次執(zhí)行
async function fn4(){
    console.log(1)
    console.log(2)
    console.log(3)
    console.log(4)
    // 如果有return 
    return 10
}
fn4()
// fn4等價于fn5
function fn5() {
    return new Promise(resolve => {
        console.log(1)
        console.log(2)
        console.log(3)
        console.log(4)
        resolve(10) // return放在resolve中 fn4如果沒有返回值，resolve就為空
    })
}
fn5()
console.log(5)  // 執(zhí)行結果 1 2 3 4 5 1 2 3 4 5 6

// 同步代碼前加await
async function fn6(){
    console.log(111)
    /*
        當我們使用await調用函數(shù)后，await當前函數(shù)后的所有代碼
            會在await當前函數(shù)執(zhí)行完畢后，被列入微任務隊列中
    */
    await console.log(112)
    // await后的所有代碼，都會放入到微任務隊列中執(zhí)行
    console.log(113)
}
fn6()
console.log(222)  // 執(zhí)行結果為 111 112 222 113
// 等價于
function fn7() {
    return new Promise(resolve => {
        console.log(111)
        // 上面的在此處加了await
        console.log(112)
        resolve()
    }).then(r => {
        console.log(113)
    })
}