Promise对象和async函数

一. 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返回回来