Promise 链的返回值

基础知识

1. 如何让promise拒绝

• 直接reject
• 代码出错等效于reject
• throw等效于代码出错

const p1 = new Promise(function(resolve, reject){
  reject(13); // 1. 创建一个立即拒绝的Promise
  // aaa(); // 2. 代码出错
  // throw(13); // 3. 直接throw
});

p1.then(function(value){
  console.log(value + 1);
}).catch(function(err){
  console.error(err); // 三种方式一样都会在第一个catch中被捕获
});

2. .then(resovleFn, rejectFn)等效于.then(resolveFn).catch(rejectFn),显然后者更优雅,下面代码全部选择后者

// .then(resovleFn, rejectFn)方式
const p1 = new Promise(function(resolve, reject){
  reject(13); // 创建一个立即拒绝的Promise
});

p1.then(function(value){
  console.log(value + 1);
}, function(err){
  console.error(err); // 13
});

// .then(resolveFn).catch(rejectFn)方式
const p1 = new Promise(function(resolve, reject){
  reject(13); // 创建一个立即拒绝的Promise
});

p1.then(function(value){
  console.log(value + 1);
}).catch(function(err){
  console.error(err); // 13
});

promise链中三种返回结果处理方式

1. 返回 普通对象|值（非Promise）
   在then或者catch中返回 普通对象|值, 都会执行下一个then, 并将返回值作为实参传入

const p1 = new Promise(function(resolve, reject){
  resolve(13); // 创建一个立即完成的Promise
});

p1.then(function(value){ // 13
  return value + 1; // 14
}).then(function(value){ // 14
  return value + 1; // 15
}).then(function(value){ // 15
  console.log(value)
})

const p1 = new Promise(function(resolve, reject){
  reject(13); // 创建一个立即拒绝的Promise
});

p1.then(function(value){
  return value + 1;
}).catch(function(value){ // 13
  return value + 1; // 14
}).then(function(value){ // 14
  console.log(value); // 14
})

2. 返回Promise对象
   在then或者catch中返回Promise对象, 这个Promise对象会接管后面的链, 具体执行什么将取决于这个Promise对象是resovle还是reject,参见基础知识1

const p1 = new Promise(function(resolve, reject){
  resolve("promise-1"); // 创建一个立即完成的Promise
});

const p2 = new Promise(function(resolve, reject){
  resolve("promise-2"); // 创建一个立即完成的Promise
});

p1.then(function(value){ // value === "promise-1"
  return p2;
}).then(function(value){ // value === "promise-2"
  return value + "-r";
}).then(function(value){ // value === "promise-2-r"
  console.log(value);
})

const p1 = new Promise(function(resolve, reject){
  resolve("promise-1"); // 创建一个立即完成的Promise
});

const p2 = new Promise(function(resolve, reject){
  reject("promise-2"); // 创建一个立即拒绝的Promise
});

p1.then(function(value){ // value === "promise-1"
  return p2;
}).then(function(value){
// 因为p2已接管链, 并已拒绝,不会走这里,会走下一个catch
  return value + "-r";
}).catch(function(err){
  console.error(err); // "promise-2"
})

3. 代码报错或者throw
   promise链中代码报错或者主动throw,都会执行下一个catch

const p1 = new Promise(function(resolve, reject){
  resolve("promise-1"); // 创建一个立即完成的Promise
});

p1.then(function(){
  aaa(); // 1. 代码报错
  // throw("my error"); // 2. 主动throw
}).catch(function(err){
  console.error(err); // 两种方式都会走到这里
})

总结

可以看到，如果返回的是普通对象，将作为下次then函数的参数传入；
如果返回的是Promise对象（p2），那么p2将会接管以后的Promise链
可以假想then函数中处理如下

function then(resolve, reject) {
  const result = resolve("xxx");
  if (result instanceof Promise) {
     // 如果是Promise, 直接返回
    return result;
  } else {
    return new Promise(function(newResolve, newRejct){
      // 如果是普通对象, 返回一个新的Promise, 并将结果作为参数传入
      newResolve(result);
    });
  }
}