Promise学习笔记

promise是一种异步解决方案，他可以很好的解决回调问题。promise有3中状态，pending (进行中)，resolved (已成功)，rejected (已失败)，Promise对象的状态改变，只有两种可能：从pending变为resolved和从pending变为rejected。并且是不可逆的

1.基本用法

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject,resolve函数的作用是将Promise对象的状态从从 pending 变为 resolved,reject函数的作用是，将Promise对象的状态从 pending 变为 rejected

const promise = new Promise(function(resolve, reject) {
  if (异步回调成功){
    resolve('成功');
  } else {
    reject('失败');
  }
});

2.then

Promise实例生成以后，可以用then方法接收resolved状态和rejected状态的回调函数。第一个参数接收成功的回调，第二个参数接收失败的回调。

const promise = new Promise(function(resolve, reject) {
  resolve('成功');
});
​
promise.then(
    res => {
    console.log(res);   //成功
    }, 
    err => {
    console.log(err);
})

then方法返回的是一个新的Promise实例。因此可以采用链式写法，即then方法后面再调用另一个then方法。第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。

const promise = new Promise(function(resolve, reject) {
  resolve('成功');
}); 
​
promise.then(res => {
     return res
 }, err => {
     
 }).then(res => {
     console.log(res);  //成功
 }, err => {
 })

3.catch

Promise实例生成以后，可以用then方法接收失败的回调（相当于then的第二个参数）

const promise = new Promise(function(resolve, reject) {
   reject('失败')
});
​
promise
.then(res => {
    console.log(res);   //接收不到任何回调
}
})
.catch(err => {
    console.log(err);   //失败
})

4.finally

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作,finally不接受任何参数，也就是说和状态无关

const promise = new Promise((resloev, reject) => {
    reject('失败')
})
​
promise
    .then(res => {
    console.log(res);
​
})
    .catch(err => {
    console.log(err);   //失败
})
    .finally(() => {
    console.log('执行了');//执行了
})

5.all

const promise = Promise.all([p1, p2, p3]);

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。此方法接受一个数组作为参数。

promise的状态由p1、p2、p3决定，分成两种情况。

p1、p2、p3都是resolve状态，那么promise实例就会变为resolve状态

p1、p2、p3之中有一个是rejected状态，那么promise实例就会变为rejected状态，promise的rejected状态取决于p1、p2、p3中第一个reject返回值

p1、p2、p3都成功

const p1 = new Promise((resloev, reject) => {
    resloev('成功1')
})
​
const p2 = new Promise((resloev, reject) => {
    resloev('成功2')
})
​
const p3 = new Promise((resloev, reject) => {
    resloev('成功3')
})
​
Promise.all([p1, p2, p3])
    .then(res => {
    console.log(res); //['成功1', '成功2', '成功3']
})

p1、p2、p3，其中p3失败

const p1 = new Promise((resloev, reject) => {
    resloev('成功1')
})
​
const p2 = new Promise((resloev, reject) => {
    resloev('成功2')
})
​
const p3 = new Promise((resloev, reject) => {
    reject('失败3')
})
​
Promise.all([p1, p2, p3])
    .then(res => {
    console.log(res);
})
    .catch(err => {
    console.log(err);   //失败3
})
​

6.race

const promise = Promise.race([p1, p2, p3]);

Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例，此方法接受一个数组作为参数。

p1, p2, p3中第一个返回的状态是什么，那么promise的状态就是什么，之后就不会改变了

const p1 = new Promise((resloev, reject) => {
    // resloev('成功1')
})
​
const p2 = new Promise((resloev, reject) => {
    setTimeout((res => {
        resloev('成功2')
    }), 4000)
})
​
const p3 = new Promise((resloev, reject) => {
    setTimeout((res => {
        reject('失败3')
    }), 3000)
})
​
Promise.race([p1, p2, p3])
    .then(res => {
    console.log(res);
})
    .catch(err => {
    console.log(err);   //失败3   因为3秒内，没有任何状态返回，3秒后，p3返回reject状态，那么peomise就是reject
})

7.allSettled

const promise = Promise.allSettled([p1, p2, p3]);

Promise.allSettled()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例，此方法接受一个数组作为参数。

此方法需要等到p1,p2,p3的状态都改变了（不管成功，失败），promise才会发送改变，并且只有reslove状态

p1没成功，,p2,p3成功了

 const p1 = new Promise((resloev, reject) => {
     // resloev('成功1')
 })
​
 const p2 = new Promise((resloev, reject) => {
     resloev('成功2')
 })
​
 const p3 = new Promise((resloev, reject) => {
     reject('失败')
 })
​
 Promise.allSettled([p1, p2, p3])
     .then(res => {
     console.log(res);  //此时没有任何结果，因为p1没有改变状态，
 })
​

p1,p2,p3成功了

 const p1 = new Promise((resloev, reject) => {
     resloev('成功1')
 })
​
 const p2 = new Promise((resloev, reject) => {
     resloev('成功2')
 })
​
 const p3 = new Promise((resloev, reject) => {
     reject('失败')
 })
​
 Promise.allSettled([p1, p2, p3])
     .then(res => {
     console.log(res);  //[{...},{...},{...}] p1,p2,p3成功了
 })

8.any

const promise = Promise.any([p1, p2, p3]);

Promise.any()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例，此方法接受一个数组作为参数。

p1,p2,p3的状态有一个是reslove状态，那么Promise就是reslove；p1,p2,p3的状态都变为rejected，那么Promise就是rejected

p1,p2成功,p3没成功了

const p1 = new Promise((resloev, reject) => {
    resloev('成功1')
})
​
const p2 = new Promise((resloev, reject) => {
    resloev('成功2')
})
​
const p3 = new Promise((resloev, reject) => {
    reject('失败')
})
​
Promise.any([p1, p2, p3])
    .then(res => {
    console.log(res);   //成功1
})
    .catch(err => {
    console.log(err);
})

p1,p2,p3都失败

 const p1 = new Promise((resloev, reject) => {
     reject('失败1')
 })
​
 const p2 = new Promise((resloev, reject) => {
     reject('失败2')
 })
​
 const p3 = new Promise((resloev, reject) => {
     reject('失败3')
 })
​
 Promise.any([p1, p2, p3])
     .then(res => {
     console.log(res);
 })
     .catch(err => {
     console.log(err);  //All promises were rejected
 })

\