promise的静态方法,你是否记得呢?

133 阅读3分钟

「这是我参与2022首次更文挑战的第7天,活动详情查看:2022首次更文挑战」。

一、Promise.resolve()

Promise.resolve()表示成功的状态.返回一个解析过得promise对象。

let p1 = Promise.resolve('success')

// console.log(p1);

p1.then(res => {
    console.log(res) //success
})

下面是一个promise.resolve()的一个简单应用场景。下面得代码当执行false时就会出问题,因为false时返回的结果不是promise对象,而是一个字符串,字符串下面没有.then方法。

function foo(flag) {
    if(flag) {
        return new Promise((resolve, reject) => {
            resolve('succes')
        })
    }else {
        return '失败了'
    }
}

foo(false).then(res => {
    console.log(res);
})

这个时候我们就可以用promise.resolve来处理这种问题

function foo(flag) {
    if(flag) {
        return new Promise((resolve, reject) => {
            resolve('succes')
        })
    }else {
        return Promise.resolve('failed')
    }
}

foo(false).then(res => {
    console.log(res);
})

二、promise.reject()

表示失败的状态。返回值是带有拒绝原因的promise对象

let p2 = Promise.reject('failed')

p2.catch(err => {
    console.log(err);
})

我们第一部分的例子出现的问题用promise.reject()也能解决,而且更加的容易理解更加的合理。

function foo(flag) {
    if(flag) {
        return new Promise((resolve, reject) => {
            resolve('succes')
        })
    }else {
        return Promise.reject('failed')
    }
}

foo(false).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

三、promise.all()

promise.all()的参数是一个promise的iterable类型的值(Array、Set、Map),返回值是所有参数的resolve结果形成的数组。当有一个参数reject时,就会立即抛出错误,并且reject出错误的信息。

下面得代码就是会在p1 p2 p3都执行后,promise.all才会打印出结果,但是结果却是[undefined,undefined,undefined]。这是因为resolve并没有值。

let p1 = new Promise((resolve,reject) => {
    setTimeout(() => {
        console.log('1');
        resolve()
    },1000)
})
let p2 = new Promise((resolve,reject) => {
    setTimeout(() => {
        console.log('2');
        resolve()
    },1000)
})
let p3 = new Promise((resolve,reject) => {
    setTimeout(() => {
        console.log('3');
        resolve()
    },1000)
})

Promise.all([p1,p2,p3]).then(res => {
    console.log(res);
})

下面得代码就可以成功收到resolve的值['succes1', 'succes2', 'succes3']

let p1 = new Promise((resolve,reject) => {
    setTimeout(() => {
        console.log('1');
        resolve('succes1')
    },1000)
})
let p2 = new Promise((resolve,reject) => {
    setTimeout(() => {
        console.log('2');
        resolve('succes2')
    },1000)
})
let p3 = new Promise((resolve,reject) => {
    setTimeout(() => {
        console.log('3');
        resolve('succes3')
    },1000)
})

Promise.all([p1,p2,p3]).then(res => {
    console.log(res);
})

下面得代码在有一个失败时,就会直接抛出错误: 1 2 3 Uncaught (in promise) failed

let p1 = new Promise((resolve,reject) => {
    setTimeout(() => {
        console.log('1');
        resolve('succes1')
    },1000)
})
let p2 = new Promise((resolve,reject) => {
    setTimeout(() => {
        console.log('2');
        reject('failed')
    },1000)
})
let p3 = new Promise((resolve,reject) => {
    setTimeout(() => {
        console.log('3');
        resolve('succes3')
    },1000)
})

Promise.all([p1,p2,p3]).then(res => {
    console.log(res);
})

四、promise.race()

Promise.race(iterable) 方法返回一个 promise,一旦迭代器中的某个promise解决或拒绝,返回的 promise就会解决或拒绝。

看如下代码

let p1 = new Promise((resolve,reject) => {
    setTimeout(() => {
        console.log('1');
        resolve('succes1')
    },1000)
})
let p2 = new Promise((resolve,reject) => {
    setTimeout(() => {
        console.log('2');
        reject('failed')
    },1000)
})
let p3 = new Promise((resolve,reject) => {
    setTimeout(() => {
        console.log('3');
        resolve('succes3')
    },1000)
})

Promise.race([p1,p2,p3]).then(res => {
    console.log(res); //succes1
})

上面的代码说明只要有一个成功,就直接返回结果成功。race本身就是竞赛、比赛的意思。成功和顺序无关,不管p1 p2 p3哪个成功,只要有一个就会返回成功。

promise.race可以用来处理一些类似于图片上传超时之类的场景

function upload() {
    return new Promise((resovle,reject) => {
        let img = new Image()
        img.onload = function() {
            resovle()
        }
        img.src = '/xxx.png'
    })
}
function timeout() {
    return new Promise((resovle,reject) => {
        setTimeout(() => {
            reject()
        },2000)
    })
}

Promise.race([upload(),timeout()]).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})