Promise对象的方法：then、catch、all、race

promise对象的方法：then、catch、all、race

then

then方法接受两个参数，onFulfilled（状态变为fullfilled的回调）和onRejected（状态变为rejected的回调）。返回一个新的promise对象，返回的promise对象的状态与then的参数（onFulfilled、onRejected）和onFulfilled、onRejected方法中返回的值有关。

1. then方法不传参数

如果不传参数，则then方法返回的promise和调用then的promise的状态一致。

更具体地，如果没有onFullfilled参数并且promise的状态为fullfilled，那么then方法返回的promise和调用then方法的promise状态一致；如果没有onRejected参数并且promise状态为rejected，那么then方法返回的promise和调用then方法的promise状态一致。

可以简单地理解：如果上一个promise不处理，那就下一个promise处理。

var p = new Promise(resolve => {
    throw new Error('test');
});

p
.then(

)
.then(
    data => console.log('resolve', data),
    err => console.log('reject', err)
    
);

// 执行结果
reject Error: test

var p = new Promise(resolve => {
    resolve('test');
});

p
.then(
    undefined, () => {}
)
.then(
    data => console.log('resolve', data),
    err => console.log('reject', err)
    
);

// 执行结果
resolve test

2. 回调不返回值

无论onFullfilled中还是onRejected中，不返回值（即默认返回undefined），则then返回的新promise的状态变为fullfilled，值为undefined。

var p = new Promise(resolve => {
    resolve('test');
});

p
.then(
    () => {}
)
.then(
    data => console.log('resolve', data),
    err => console.log('reject', err)
    
);

// 执行结果
resolve undefined

var p = new Promise(resolve => {
    throw new Error('test');
});

p
.then(
    () => {},
    () => {}
)
.then(
    data => console.log('resolve', data),
    err => console.log('reject', err)
    
);

// 执行结果
resolve undefined

3. 返回普通值

无论onFullfilled中还是onRejected中，返回普通值，则then返回的新promise的状态变为fullfilled，值为这个值。普通值指的是，非promise对象、非thenable对象（含有then方法的对象）。

var p = new Promise(resolve => {
    resolve('test');
});

p
.then(
    () => {return 'a'},
    () => {return {b: 1}}
)
.then(
    data => console.log('resolve', data),
    err => console.log('reject', err)
    
);

// 执行结果
resolve a

var p = new Promise(resolve => {
    throw new Error('test');
});

p
.then(
    () => {return 'a'},
    () => {return {b: 1}}
)
.then(
    data => console.log('resolve', data),
    err => console.log('reject', err)
    
)

// 执行结果
resolve {b: 1}

4. 返回promise

无论onFullfilled中还是onRejected中，返回一个promise对象，则以该promise的任务和状态返回新的promise。

var p = new Promise(resolve => {
    throw new Error('test');
});

p
.then(
    () => {},
    () => {return Promise.resolve('yes');}
)
.then(
    data => console.log('resolve', data),
    err => console.log('reject', err)
    
);

// 执行结果
resolve yes

var p = new Promise(resolve => {
    resolve('test');
});

p
.then(
    () => {return Promise.reject('error');},
    () => {return {a: 1}}
)
.then(
    data => console.log('resolve', data),
    err => console.log('reject', err)
    
);

// 执行结果
reject error

5. 返回thenable

无论onFullfilled中还是onRejected中，返回一个thenable对象，则调用该对象的then方法，该then方法接收两个参数resolvePromise和rejectPromise，如果then中调用了resolvePromise，则返回的promise状态置为fullfilled，如果then中调用了rejectPromise，或者then中抛出异常，则返回的Promise状态置为rejected，在调用resolvePromise或者rejectPromise之前，返回的promise处于pending状态。

var p = new Promise((r) => {throw new Error('test')});


p
.then(
    () => ({then: function(resolvePromise, rejectPromise) {resolvePromise('resolvePromise')}}),
    e => ({then: function(resolvePromise, rejectPromise) {rejectPromise('rejectPromise')}})
)
.then(
    data => console.log('resolve', data),
    e => console.log('reject', e)
);

// 执行结果
reject rejectPromise

var p = new Promise((r) => {throw new Error('test')});


p
.then(
    () => ({then: function(resolvePromise, rejectPromise) {}}),
    e => ({then: function(resolvePromise, rejectPromise) {}})
)
.then(
    data => console.log('resolve', data),
    e => console.log('reject', e)
);

// 执行结果
promise 处于pending状态

var p = new Promise((r) => {throw new Error('test')});

p
.then(
    () => {return {then: function(resolvePromise, rejectPromise) {resolve('resolvePromise')}}},
    e => {return {then: function(resolvePromise, rejectPromise) {throw new Error('surprise')}}}
)
.then(
    data => console.log('resolve', data),
    e => {console.error('reject', e)}
);

// 执行结果
reject Error: surprise

6. 抛出错误

无论onFullfilled中还是onRejected中，抛出错误，则以rejected为状态返回新promise。

var p = new Promise(resolve => {resolve('test')});


p
.then(
    () => {throw new Error('1')},
    e => {return true}
)
.then(
    data => console.log('resolve', data),
    e => {console.error('reject', e)}
);

// 执行结果
reject Error: 1

var p = new Promise((r) => {throw new Error('test')});


p
.then(
    () => {return true},
    e => {throw new Error('2')}
)
.then(
    data => console.log('resolve', data),
    e => {console.error('reject', e)}
);

// 执行结果
reject Error: 2

catch

catch方法和then方法的reject回调用法相同，如果这时候任务处于rejected状态，则直接执行catch，catch的参数就是reject的reason；如果任务处于pending状态，则注册catch回调，等到状态变成rejected时候再执行。

p.then((val) => console.log('fulfilled:', val))
  .catch((err) => console.log('rejected', err));

// 等同于
p.then((val) => console.log('fulfilled:', val))
  .then(null, (err) => console.log("rejected:", err));

all

Promise.all方法用于多个异步任务执行，当所有任务都正常完成时候，再做后面处理的场景。

Promise.all方法接收一个promise数组作为参数，返回一个promise，当参数的数组中的所有promise都resolve时候，返回的promise才会resolve；而若有一个参数的数组中的promise reject，返回的promise就会reject。

Promise.all方法返回的promise的then的第一个参数onFullfilled回调的参数也是一个数组，对应参数中的数组promise resolve的结果。

const p1 = Promise.resolve(1);
const p2 = new Promise(resolve => {
	setTimeout(() => {
  	resolve(2);
  }, 1000);
});

Promise.all([p1, p2])
.then(
	([result1, result2]) => {console.log('resolve', result1, result2);}
);

// 执行结果
resolve 1 2

const p1 = Promise.reject(1);
const p2 = new Promise(resolve => {
	setTimeout(() => {
  	resolve(2);
  }, 1000);
});

Promise.all([p1, p2])
.then(
	([result1, result2]) => {console.log('resolve', result1, result2);},
    e => console.log('reject', e)
);

// 执行结果
reject 1

race

Promise.race方法用于多个异步任务执行，当有其中一个任务完成或失败时候，就执行后续处理的场景。

Promise.race接收一个promise数组作为参数，返回一个新的promise。当参数数组中其中一个promise resolve或者reject，返回的promise就相应地改变状态。

var p1 = Promise.reject(1);
var p2 = new Promise(resolve => {
	setTimeout(() => {
  	resolve(2);
  }, 1000);
});

Promise.race([p1, p2])
.then(
		data => {console.log('resolve', data);},
    e => {console.log('reject', e);}
);

// 执行结果
reject 1

allSettled

Promise.allSettled用于多个异步任务都结束（完成或者失败）时候，再执行后续任务的场景。

Promise.allSettled接收一个promise数组作为参数，返回一个promise。当参数数组中所有promise状态改变后，返回的promise变为fullfilled状态。

返回的promise的onFullfilled参数接收一个结果数组作为参数，数组对应Promise.allSettled传入的promise数组。结果数组每个元素是一个对象，格式固定：{status, value, reason}，标识状态、resolve返回值、reject原因。

var p1 = Promise.reject(1);
var p2 = new Promise(resolve => {
	setTimeout(() => {
  	resolve(2);
  }, 1000);
});

Promise.allSettled([p1, p2])
.then(
	data => {console.log('resolve', data);},
);

// 执行结果
resolve [{status: "rejected", reason: 1}, {status: "fulfilled", value: 2}]