Promise链式调用特性总结

相信各位前端小伙伴对于Promise应该很熟悉了吧，平常工做中，100%会用到的一个东西，除非你还在用callback解决异步，那我就太佩服了。话很少说，进入正题。

提早声明一下，如下代码在node环境中实现，你能够建立一个文件，使用nodemon这个工具执行这个文件，就能够进行监听更新，真香。

首先你要建立一个promise

let p=new Promise((resolve,reject)=>{
  resolve('first resolve')
})

方式1、经过return传递结果

p.then(res=>{
  return res;
}).then(res=>{
  console.log(res)
})

控制台就会输出：first resolve

方式2、经过返回新的promise resolve结果

p.then(res=>{
  return res;
}).then(res=>{
  return new Promise((resolve,reject)=>{
    resolve('second resolve: '+res)
  })
}).then(res=>{
  console.log(res)
})

控制台就会输出：second resolve: first resolve
若是在返回的promise里加一个异步好比settimeout呢，结果会是什么样？

p.then(res=>{
  return res;
}).then(res=>{
  return new Promise((resolve,reject)=>{
    // resolve('second resolve: '+res)
    setTimeout(()=>{
      resolve('second resolve: '+res)
    },2000)
  })
}).then(res=>{
  console.log(res)
})

控制台等待2s后输出：second resolve: first resolve

方式3、经过返回新的promise reject 缘由

既然能够经过新的promise resolve，那么reject应该也能够。

p.then(res=>{
  return res;
}).then(res=>{
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      reject('error')
    },2000)
  })
}).then(res=>{
  console.log(res)
},err=>{
  console.log('error: '+err)
})

控制台等待2s后输出：error: error

方式4、then函数走了失败回调继续走then

紧接着上一步，失败后，reject出缘由，继续后面then

p.then(res=>{
  return res;
}).then(res=>{
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      reject('error')
    },2000)
  })
}).then(res=>{
  console.log(res)
},err=>{
  console.log('error: '+err)
  // 默认 return undefined
}).then(res=>{
  console.log('second then success: '+res)
},err=>{
  console.log('second then error: '+err)
})

控制台会输出两行内容：error: error，second then success: undefined。这就代表在reject 后面继续then会执行下一步的resolve，若是上一步没有返回值，默认接收undefined。

方式5、then中使用throw new Error状况

若是在then中抛出异常呢，如何显示？

p.then(res=>{
  return res;
}).then(res=>{
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      reject('error')
    },2000)
  })
}).then(res=>{
  console.log(res)
},err=>{
  console.log('error: '+err)
}).then(res=>{
  throw new Error('happend error')
}).then(res=>{
  console.log('third then success'+res)
},err=>{
  console.log('third then error '+err)
})

控制台会输出：
error: error
third then error Error: happend error
这代表throw error抛出异常相似reject，会由下一步的then方法中的错误方法处理。

方式6、在promise中使用catch进行错误捕获

p.then(res=>{
  return res;
}).then(res=>{
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      reject('error')
    },2000)
  })
}).then(res=>{
  console.log(res)
},err=>{
  console.log('error: '+err)
}).then(res=>{
  throw new Error('happend error')
}).then(res=>{
  console.log('third then success'+res)
}).catch(err=>{
  console.log('catched '+err)
})

控制台会输出：
error: error
catched Error: happend error

若是在catch方法的前面then中有对上一步错误的处理办法会怎么样呢？

p.then(res=>{
  return res;
}).then(res=>{
  return new Promise((resolve,reject)=>{
    // resolve('second resolve: '+res)
    setTimeout(()=>{
      reject('error')
    },2000)
  })
}).then(res=>{
  console.log(res)
},err=>{
  console.log('error: '+err)
}).then(res=>{
  throw new Error('happend error')
}).then(res=>{
  console.log('third then success'+res)
},err=>{
  console.log('third then error '+ err)
}).catch(err=>{
  console.log('catched '+err)
})

控制台会输出：
error: error
third then error Error: happend error
这说明catch捕获，若是catch前面有error处理函数，catch不会捕获异常的。

若是在catch后面继续then呢？

p.then(res=>{
  return res;
}).then(res=>{
  return new Promise((resolve,reject)=>{
    // resolve('second resolve: '+res)
    setTimeout(()=>{
      reject('error')
    },2000)
  })
}).then(res=>{
  console.log(res)
},err=>{
  console.log('error: '+err)
}).then(res=>{
  throw new Error('happend error')
}).then(res=>{
  console.log('third then success'+res)
}).catch(err=>{
  console.log('catched '+err)
  return 'catched error'
}).then(res=>{
  console.log('catched then '+res)
})

控制台会输出：
error: error
catched Error: happend error
catched then catched error
这说明catch后面是能够继续调用then的，catch 在promise的源码里面其实也是一个then，catch遵循then的运行规则。

总结

promise链式调用，具体是失败仍是成功，取决于如下状况：

成功的条件

• then return 一个普通的js 值
• then return 一个新的promise成功态的结果 resolve处理

失败的条件

• then return 一个新的promise失败态的缘由 error
• then throw抛出异常

以上就是promise链式调用的一些实践总结，复习复习基础知识。欢迎你们交流。

参考资料：

• promise+规范