小白的理解JS中的promise

Promise是ES6中所独有的对象,它很抽象,多用于异步js代码中,如:async函数与await一起使用,
一个promise可以处于3种状态中的一种:
pending —— 进行状态
resolve —— 成功状态
rejects —— 失败状态
一个标准的promise对象的格式如下:

new Promise((resolve,rejects) => {
    const n = Math.round(Math.random()*10)
    if (n>5){
        resolve("success !")
    } else {
        rejects("fail !")
    }
})

但我们通常要在外部调用promise对象,如果直接写一个赋值操作,就不方便操作这个promise对象了,如下:

const test = new Promise((resolve,rejects) => {
    const n = Math.round(Math.random()*10)
    if (n>5){
        resolve("success !")
    } else {
        rejects("fail !")
    }
})
// 调用
await test()
// 输出
success !
// 后续调用
await test()
await test()
// 输出
success !
success !

test只会被赋值一次,只有一个具体的值
所以为了灵活的调用promise对象,我们要将其写成函数形式:

const test = () =>{
    return new Promise((resolve,rejects) => {
        const n = Math.round(Math.random()*10)
        if (n>5){
            resolve("success !")
        } else {
            rejects("fail !")
        }
    })
} 
// 调用:
await test()
// 输出:
success !
// 后续调用
await test()
await test()
// 输出:
fail !
success !

那么问题来了,如果resolve之后,后续的代码会不会继续执行呢?答案是会

const test = () =>{
    return new Promise((resolve,rejects) => {
        const n = Math.round(Math.random()*10)
        if (n>5){
            resolve("success !")
        } else {
            rejects("fail !")
        }
        console.log("resolve之后并没有停止运行")
    })
} 

await test()
// 输出
success !
resolve之后并没有停止运行

为了让代码在resolve之后就返回结果不继续执行,我们需要return一下

const test = () =>{
    return new Promise((resolve,rejects) => {
        const n = Math.round(Math.random()*10)
        if (n>5){
            resolve("success !")
            return "";
        } else {
            rejects("fail !")
            return "";
        }
        console.log("resolve之后并没有停止运行")
    })
} 

await test()
// 输出
success !

promise对象中resolve的值最后会在后续的then中使用:

const test = () =>{
    return new Promise((resolve,rejects) => {
        const n = Math.round(Math.random()*10)
        if (n>5){
            resolve("success !")
            return "";
        } else {
            rejects("fail !")
            return "";
        }
        console.log("resolve之后并没有停止运行")
    })
} 

await test().then(r => {
    console.log(`then ${r}`)
})

// 输出
then success !

promise.race()

当有多个promise的时候,可能我们只需要其中一个返回结果就行了。如下:

const a = new Promise((resolve,reject) => {
    setTimeout(() => {
        console.log("我是兔子")
        resolve(500)
    },1000)
})

const b = new Promise((resolve,reject) => {
    setTimeout(() => {
        console.log("我是乌龟")
        resolve(100)
    },2000)
})

Promise.race([a,b]).then(v => {
    console.log(v)
})

// 输出:
我是兔子
500
我是乌龟

注意:race()中传入的类型应该是promise类型!

关于多个不同时间的函数执行

比如一个函数3秒执行完毕,一个函数5秒执行完毕,一个函数10秒执行完毕。现在我们只想要3秒结束的结果。
有两种写法可以获取到:

// 第一种:
const a2 = new Promise((resolve,reject) => {
    setTimeout(() => {
        console.log("我是兔子")
        resolve(500)
    },3000)
})

const b2 = new Promise((resolve,reject) => {
    setTimeout(() => {
        console.log("我是乌龟")
        resolve(100)
    },5000)
})

var result = await Promise.race([a2,b2])

// 第二种:
const a = () => {
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            console.log("我是乌龟")
            resolve(100)
        },5000)

        setTimeout(() => {
            console.log("我是兔子")
            resolve(500)
        },1000)
    })
}

result = await a()

你可能感兴趣的:(小白的理解JS中的promise)