「这是我参与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);
})