Promise的学习笔记

1、Promise的then返回了一个新的Promise

      let s1 = new Promise((resolve, reject) => {})
      let s2 = new Promise((resolve, reject) => {
        resolve(1111)
      }).then((res) => {
        console.log(res)
      })
      console.log(s1,'s1')
      console.log(s2,'s2')

结果：

2、Promise的then返回了新的Promise引起的链式效应

      let s = new Promise((resolve, reject) => {
        resolve(1111)
      }).then((res) => {
        console.log(res)
      }).then((res)=>{
        console.log('你好');
      })

结果：

理解：
我理解的上述代码等同于👇下面的代码：

      let s = new Promise((resolve, reject) => {
        resolve(1111)
      }).then((res) => {
        console.log(res)
        return new Promise((resolve,reject)=>{
          resolve()
        })
      }).then((res)=>{
        console.log('你好');
      })

3、Promise的then链式参数

      let s = new Promise((resolve, reject) => {
        resolve(1111)
      }).then((res) => {
        console.log(res)
        return '参数'
      }).then((res)=>{
        console.log(res);
      })

结果：

理解：

我理解的上述代码等同于👇下面的代码：

      let s = new Promise((resolve, reject) => {
        resolve(1111)
      }).then((res) => {
        console.log(res)
        return new Promise((resolve,reject)=>{
          resolve('参数')
        })
      }).then((res)=>{
        console.log(res);
      })

4、Promise的then链式阻断

4.1 在then回调函数中return前存在异常

      Promise.resolve()
      .then((res) => {
        throw new Error('错误')
        console.log(res)
        return '参数'
      }).then((res)=>{
        console.log(res);
      }).catch(err=>{
        console.log(err,'err');
      })

结果：

理解：

then()方法指定的回调函数，如果运行中抛出错误，会被catch()方法捕获

4.2 在then回调函数中return前存在异常

      Promise.resolve()
      .then((res) => {
        return '参数'
        console.log('是否执行');
        throw new Error('错误')
      }).then((res)=>{
        console.log(res,'res');
      }).catch(err=>{
        console.log(err,'err');
      })

结果：

理解:
这当然是因为函数中return后面的代码不执行😄

5、then中存在异步（setTimeout等）

      Promise.resolve()
        .then(() => {
          // 异步宏任务
          setTimeout(() => {
            return "11111"
          }, 0)
        })
        .then((res) => {
          console.log(res, "res")
        })
        .catch((err) => {
          console.log(err, "err")
        })

结果：

理解：
setTmeout中的箭头回调函数虽然return了，但是是定时器回调函数的返回值，而非then生成的Promise.resolve('11111)，参考之前的第二节，该代码可理解为

      Promise.resolve()
        .then(() => {
          // 异步宏任务
          setTimeout(() => {
            return "11111"
          }, 0)
          // 这里是then的返回
          return new Promise((resolve,reject)=>{
            resolve()
          })
        })
        .then((res) => {
          console.log(res, "res")
        })
        .catch((err) => {
          console.log(err, "err")
        })

所以在then回调函数中的异步操作不影响then默认返回的Promise

举例一：

  Promise.resolve()
        .then(() => {

          // 异步宏任务
          setTimeout(() => {
            return new Promise((resolve,rejece)=>{
              resolve('new Promise')
            })
          },0)
          return '我不在异步里'
        })
        .then((res) => {
          console.log(res,'res');
        }).catch((err)=>{
        console.log(err,'err');
        })

结果：

举例二：

  Promise.resolve()
        .then(() => {
          // 异步宏任务
        return  setTimeout(() => {
          throw new Error('错误')
            return new Promise((resolve,rejece)=>{
              resolve('new Promise')
            })
          },0)
        })
        .then((res) => {
          console.log(res,'res');
        }).catch((err)=>{
        console.log(err,'err');
        })

结果（不会打印err）：