promise 与 async await 异步之美

一眼看懂promise与async await

// promise方法
let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('我是p1')
    }, 4000)
})
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('我是p2')
    }, 200)
})
let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('我是p3')
    }, 200)
})

// 想让p1完成后再执行P2再执行P3
// 数量太多只能循环嵌套
p1.then((res) => {
    console.log(res);
    p2.then((res) => {
        console.log(res);
        p3.then((res) => {
            console.log(res);
        })
    })
})

async和await在干什么，async用于申明一个function是异步的，而await可以认为是async wait的简写，等待一个异步方法执行完成。

// async  await语法糖
let a1 = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('我是a1')
        }, 4000)
    })
}
let a2 = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('我是a2')
        }, 40)
    })
}
let a3 = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('我是a3')
        }, 40)
    })
}
// 想让a1完成后再执行a2再执行a3
//能避免回调
async function asy() {
    await a1().then((res) => { console.log(res) });
    await a2().then((res) => { console.log(res) });
    await a3().then((res) => { console.log(res) });
}
asy();

• async表示这是一个async函数，await只能用在这个函数内部
• await表示在这里等待promise返回结果后，再继续执行
• await后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了...）
• await等待的虽然是promise对象，但不必写.then(...)，直接可以得到返回值