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
    评论
async/awaitPromise都是JavaScript中处理异步编程的方式,但是它们有一些不同之处。 Promise是一种异步编程的解决方案,它可以将异步操作封装成一个Promise对象,通过链式调用then()和catch()方法来处理异步操作的结果或错误。Promise对象有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。 async/await是ES2017引入的异步编程解决方案,它可以让异步代码看起来像同步代码,使得代码更加易读易懂。async函数是返回一个Promise对象的函数,并且在函数内部可以使用await关键字来等待一个Promise对象的结果。当await关键字后面的Promise对象状态变为fulfilled时,await表达式的值就是Promise对象的resolve值,如果Promise对象状态变为rejected,则会抛出一个错误。 下面是一个使用Promiseasync/await实现异步操作的例子: 使用Promise实现异步操作: ```javascript function getData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('data'); }, 1000); }); } getData().then(data => { console.log(data); // 输出:data }).catch(error => { console.log(error); }); ``` 使用async/await实现异步操作: ```javascript async function getData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('data'); }, 1000); }); } async function main() { try { const data = await getData(); console.log(data); // 输出:data } catch (error) { console.log(error); } } main(); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值