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

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值