Promise链式调用的特点、特性

64 阅读1分钟

声明一个最简单的promise

let promise = new Promise((resolve, reject) => {
  resolve('succeed')
})

通过return传递结果

promise.then(res => {
  return res
})
  .then(res => {
    console.log(res); //succeed
  }

通过新的promise resolve结果

promise.then(res => {
  return res
})
  .then(res => {
    return new Promise((resolve, reject) => {
      resolve(res)
    })
  })
  .then(res => {
    console.log(res); //succeed
  })

那如果是异步呢?

promise.then(res => {
  return res
})
  .then(res => {
    // 只要你new Promise
    //不管 异步 还是 同步
    // 都会走 后边.then
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(res)
      }, 2000)
    })
  })
  .then(res => {
    console.log(res); //succeed
  })

结果一样,只不过它可以接收异步或同步

通过新的promise reject原因/错误

promise.then(res => {
  return res
})
  .then(res => {
    return new Promise((resolve, reject) => {
      reject('ERROR')
    })
  })
  .then(res => {
    console.log(res);
  }, (err) => {
    console.log("Rejected:", err);// Rejected:Error
  })

那如果.then走了失败的回调函数后再走.then的结果呢?

promise.then(res => {
  return res
})
  .then(res => {
    return new Promise((resolve, reject) => {
      reject('ERROR')
    })
  })
  .then(res => {
    console.log(res);
  }, (err) => {
    console.log("Rejected:", err);// Rejected:Error
    // 默认 return undefined
  })
  .then((res) => {
    console.log("FullFilled:", res);
  }, (err) => {
    console.log("Rejected:", err);
  })

image.png

在then中抛出错误 throw new Error

promise.then(res => {
  return res
})
  .then(res => {
    return new Promise((resolve, reject) => {
      reject('ERROR')
    })
  })
  .then(res => {
    console.log(res);
  }, (err) => {
    console.log("Rejected:", err);// 还走着里Rejected:Error
    // 默认 return undefined
  })
  .then((res) => {
    throw new Error('Throw Error') //这里抛出错误
  })
  .then((err) => {
    console.log(err);
  }, (err) => {
    console.log("Exception: Error"); //还有这里Throw Error
  })																 //会在err这里拿到

image.png

用catch来捕获错误呢?会发生什么

promise.then(res => {
  return res
})
  .then(res => {
    return new Promise((resolve, reject) => {
      reject('ERROR')
    })
  })
  .then(res => {
    console.log(res);
  }, (err) => {
    console.log("Rejected:", err);// Rejected:Error
    // 默认 return undefined
  })
  .then((res) => {
    throw new Error('Throw Error')
  })
  .then((err) => {
    console.log(err);
  }, (reason) => {
    console.log('reason', reason);//reason: Throw Error
  })
  .catch(err => {
    console.log("catch:", err); 
  })

image.png
我发现了!  它会找最近的错误来抛出 有reason就不会走.catch

总结

 注意 .catch下边 还继续可以使用.then.catch相当于一个 “.than

成功的条件

then return 普通的JS value
then return 新的promise成功态的结果 value

失败的条件

then return 新的promise失败态的原因 reason
then 抛出了异常 throw new Error