async，await解决promise问题

有如下程序：

程序A
程序B
程序C

• 异步：当A运行时阻塞后，B可运行，A阻塞结束后，再处理A。之后继续B
• 同步：A运行时阻塞后，等待，之后A结束，才可继续运行B
• 联想：操作系统中的进程调度【阻塞态，用户级线程】

js程序正常运行时是异步的

1. 常规写法，是异步的

let processA = 1
let processB = 1
let processC = 1
let processD = 1

function A() {
    return new Promise((resolve, reject) => {
        console.log('A Promise')
        if (processA) {
            resolve('resolve A')
        }
        else {
            reject('reject A')
        }
    })
}

function B() {
    return new Promise((resolve, reject) => {
        console.log('B Promise')
        if (processB) {
            resolve('resolve B')
        }
        else {
            reject('reject B')
        }
    })
}

function C() {
    return new Promise((resolve, reject) => {
        console.log('C Promise')
        if (processC) {
            resolve('resolve C')
        }
        else {
            reject('reject C')
        }
    })
}

function D() {
    return new Promise((resolve, reject) => {
        console.log('D Promise')
        if (processD) {
            resolve('resolve D')
        }
        else {
            reject('reject D')
        }
    })
}


A().then(res => console.log(res))
B().then(res => console.log(res))
C().then(res => console.log(res))
D().then(res => console.log(res))

运行结果：

A Promise
B Promise
C Promise
D Promise
resolve A
resolve B
resolve C
resolve D

2. 用【then，return】可变为同步

let processA = 1
let processB = 1
let processC = 1
let processD = 1

function A() {
    return new Promise((resolve, reject) => {
        console.log('A Promise')
        if (processA) {
            resolve('resolve A')
        }
        else {
            reject('reject A')
        }
    })
}

function B() {
    return new Promise((resolve, reject) => {
        console.log('B Promise')
        if (processB) {
            resolve('resolve B')
        }
        else {
            reject('reject B')
        }
    })
}

function C() {
    return new Promise((resolve, reject) => {
        console.log('C Promise')
        if (processC) {
            resolve('resolve C')
        }
        else {
            reject('reject C')
        }
    })
}

function D() {
    return new Promise((resolve, reject) => {
        console.log('D Promise')
        if (processD) {
            resolve('resolve D')
        }
        else {
            reject('reject D')
        }
    })
}



A()
    .then(res => {
        console.log(res)
        return B()
    })
    .then(res => {
        console.log(res)
        return C()
    })
    .then(res => {
        console.log(res)
        return D()
    })

运行结果：

A Promise
resolve A
B Promise
resolve B
C Promise
resolve C
D Promise

3. 【用sync，await】程序写法是异步的，运行时是同步的

let processA = 1
let processB = 1
let processC = 1
let processD = 1

function A() {
    return new Promise((resolve, reject) => {
        console.log('A Promise')
        if (processA) {
            resolve('resolve A')
        }
        else {
            reject('reject A')
        }
    })
}

function B() {
    return new Promise((resolve, reject) => {
        console.log('B Promise')
        if (processB) {
            resolve('resolve B')
        }
        else {
            reject('reject B')
        }
    })
}

function C() {
    return new Promise((resolve, reject) => {
        console.log('C Promise')
        if (processC) {
            resolve('resolve C')
        }
        else {
            reject('reject C')
        }
    })
}

function D() {
    return new Promise((resolve, reject) => {
        console.log('D Promise')
        if (processD) {
            resolve('resolve D')
        }
        else {
            reject('reject D')
        }
    })
}
//程序写法是异步的，运行时是同步的
async function fABCD() {
    const resA = await A()
    console.log(resA)
    const resB = await B()
    console.log(resB)
    const resC = await C()
    console.log(resC)
    const resD = await D()
    console.log(resD)
}

fABCD()

运行结果：

A Promise
resolve A
B Promise
resolve B
C Promise
resolve C
D Promise
resolve D

参考

https://www.bilibili.com/video/BV1fK411t7FA