小白的理解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()