前端异步(async)解决方案(所有方案)(1)

在这里我们主要关注promise1.then()方法调用后返回的Promise对象的状态，是pending还是fulfilled，或者是rejected?

返回的这个Promise对象的状态主要是根据promise1.then()方法返回的值，大致分为以下几种情况：

1.如果then()方法中返回了一个参数值，那么返回的Promise将会变成接收状态。

2.如果then()方法中抛出了一个异常，那么返回的Promise将会变成拒绝状态。

3. 如果then()方法调用resolve()方法，那么返回的Promise将会变成接收状态。

4. 如果then()方法调用reject()方法，那么返回的Promise将会变成拒绝状态。

5.如果then()方法返回了一个未知状态(pending)的Promise新实例，那么返回的新Promise就是未知 状态。

6.如果then()方法没有明确指定的resolve(data)/reject(data)/return data时，那么返回的新Promise就是接收状态，可以一层一层地往下传递。

2):Promise.prototype.catch(callback)

catch()方法和then()方法一样，都会返回一个新的Promise对象，它主要用于捕获异步操作时出现的异常。因此，我们通常省略then()方法的第二个参数，把错误处理控制权转交给其后面的catch()函数，如下：

var promise3 = new Promise(function(resolve, reject) {

setTimeout(function() {

reject(‘reject’);

}, 2000);

});

promise3.then(function(data) {

console.log(‘这里是fulfilled状态’); // 这里不会触发

// …

}).catch(function(err) {

// 最后的catch()方法可以捕获在这一条Promise链上的异常

console.log(‘出错：’ + err); // 出错：reject

});

3):Promise.all()

Promise.all()接收一个参数，它必须是可以迭代的，比如数组。

它通常用来处理一些并发的异步操作，即它们的结果互不干扰，但是又需要异步执行。它最终只有两种状态：成功或者失败。

指的是将数组中所有的任务执行完成之后， 才执行.then 中的任务

它的状态受参数内各个值的状态影响，即里面状态全部为fulfilled时，它才会变成fulfilled，否则变成rejected。

成功调用后返回一个数组，数组的值是有序的，即按照传入参数的数组的值操作后返回的结果。

如下：

const p1 = new Promise((resolve,reject)=>{

setTimeout(()=>{

resolve(console.log(‘p1 任务1’))

},1000)

})

.then( data => {

console.log(‘p1 任务2’)

})

.then( res => {

console.log(‘p1 任务3’)

})

.catch( err =>{ throw err} )

const p2 = new Promise((resolve,reject)=>{

resolve(console.log(‘p2 任务1’))

}).then(

data => {

console.log(‘p2 任务2’)

}

).catch(

err => {

throw err

}

)

//只有在p1,p2都执行完后才会执行then里的内容

Promise.all([p1,p2])

.then(()=>console.log(‘done’))

4):Promise.race()

Promise.race()和Promise.all()类似，都接收一个可以迭代的参数，但是不同之处是Promise.race()的状态变化不是全部受参数内的状态影响，一旦参数内有一个值的状态发生的改变，那么该Promise的状态就是改变的状态。就跟race单词的字面意思一样，谁跑的快谁赢。如下：

var p1 = new Promise(function(resolve, reject) {

setTimeout(resolve, 300, ‘p1 doned’);

});

var p2 = new Promise(function(resolve, reject) {

setTimeout(resolve, 50, ‘p2 doned’);

});

var p3 = new Promise(function(resolve, reject) {

setTimeout(reject, 100, ‘p3 rejected’);

});

Promise.race([p1,