一. Promise物件

// Promise物件通過new關鍵字生成，有兩個引數，成功resolve，失敗reject
function fun(num) {
    return new Promise((resolve, reject) => {
        if (num === 'Hello') {
            setTimeout(() => {
                resolve(num + '我成功了')
            }, 2000)
        } else {
            reject('報錯error')
        } 
    })
}
fun(
 
'Hello').then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
}) // 通過.then方法呼叫

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('this is where')
    }, 2000)
})
let p2 = new Promise((resolve, reject) => {
    resolve(p1)
})
p2.then(res 
 
=> {
    console.log(res)
}).catch(err => {
    console.log(err)
}) 
// 同樣Promise物件可以將一個Promise物件的resolve方法作為返回值傳給新的Promise，一級一級巢狀傳入，但是那樣會造成回撥地獄，而且程式碼會非常繁瑣冗餘，這樣我們就需要async函式，他會使非同步呼叫變得非常方便

二. async函式

function p1(name) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(name)
        }, 
 
2000)
    })
}
function p2(name) {
    return new Promise((resolve, reject) => {
        if (name === '小明') {
            resolve('對的，他就是' + name)
        } else {
            reject('不對，他叫' + name)
        } 
    })
}

// async函式的try...catch結構簡單點講就是reslove成功返回值會在try中，catch就是reject錯誤返回的資料
async function fun() {
    try {
        const fun1 = await p1('小明')
        console.log(fun1) // 小明  備註(第一個非同步函式返回的值)
        const fun2 = await p2(fun1)
        console.log(fun2) // 對的，他就是小明  備註(成功返回資料)
    } catch(err) {
        console.log(err) // 不對，他叫小紅  備註（如果第一非同步函式傳遞的引數是小紅，返回值也是小紅，那麼第二個非同步函式的引數就是小紅並且會丟擲reject）
    }
}
fun() // 呼叫async函式

// 另一種方式就是通過return的返回一個Promise物件，通過.then的方式來呼叫
async function fun() {
    const fun1 = await p1('小明')
    return await p2(fun1)
}
fun().then(res => {
    console.log(res) // 對的，他就是小明  備註(成功返回資料)
}).catch(err => {
    console.log(err) // 不對，他叫小紅 reject丟擲的異常
}) // 備註: 當地一個非同步函式返回reject時，第二個函式就不會執行，當我們需要第一個返回值就算是reject但是不影響第二個非同步函式的執行，就把第一個函式放到try...catch結構中，把第二個放到外邊return返回回來