今天我们讲一下es6对Promise的扩展,我们使用axios进行ajax请求来演示一下,
首先我先准备了3个接口:
Promise.all()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript异步</title>
</head>
<body>
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
<script>
const promise1 = axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/promise1')
.then(res => {
console.log('promise1成功了!');
return res.data.data
})
const promise2 = axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/promise2')
.then(res => {
console.log('promise2成功了!');
return res.data.data
})
const promise3 = axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/promise3')
.then(res => {
console.log('promise3成功了!');
return res.data.data
})
const promise = Promise.all([promise1, promise2, promise3])
.then(res=> {
console.log(res);
console.log('Promise.all成功了!');
})
.catch(err=>{
console.log(err)
console.log('Promise.all出错了!');
})
</script>
</body>
</html>
我们知道axios返回的是一个promise对象,我们可以打印一下:
console.log(promise1)输出:
Promise.all就是用于将多个 Promise 实例,包装成一个新的 Promise 实例
Promise.all,接收的参数是一个可迭代对象,比如:Array、String等,我们这个例子是接收了一个数组,数组的每一项都返回Promise实例
promise1,promise2,promise3都是返回promise实例,如果他们都返回成功的状态,Promise.all则返回成功的状态,输出一个数组,是promise1,promise2,promise3的返回值,数组的顺序和他们的执行顺序无关,和他们作为参数排列的顺序有关
看下我们例子的输出:
我们将promise1做一下改动,使promise1报错:
const promise1 = axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/promise1')
.then(res => {
console.log('promise1成功了!');
return err
})
如果有一个返回失败(reject),Promise.all则返回失败(reject)的状态,此时第一个被reject的实例的返回值,会传递给promise的回调函数。
promise的执行结果依赖于promise1,promise2,promise3的执行结果,全部成功,Promise.all就返回成功,有一个失败,Promise.all就返回失败
Promise.all只关心集体的执行结果
Promise.race()
Promise中的竞态,用法和Promise.all类似,对应参数也与Promise.all相同是个可迭代对象
race() 返回一个 Promise,谁执行的快,就返回谁的执行结果,不管是成功还是失败
const promise = Promise.race([promise1, promise2, promise3])
.then(res => {
console.log(res);
console.log('Promise.all成功了!');
})
.catch(err=>{
console.log(err);
console.log('Promise.all出错了!')
})
输出:
通过输出我们发现
promise2是第一个完成的,所以promise的返回结果就是promise2的执行结果
而且就算完成,但是 进程不会立即停止,还会继续执行下去。
Promise.finally()
finally() 方法返回一个Promise,在promise执行结束时,无论结果是成功或者是失败,在执行then()和catch()后,都会执行finally指定的回调函数,该方法是 ES9 引入标准的。
const promise = Promise.race([promise1, promise2,promise3])
.then(res => console.log(res))
.catch(err => console.log(err))
.finally(() => {
console.log("finally的执行与状态无关")
});
如果你想在 promise 执行完毕后无论其结果怎样都做一些处理或清理时,finally() 方法可能是有用的。
友情链接:点击查看所有文章目录