Promise(简介、基本使用、API、手写实现 Promise、async与await)(五)

简介: Promise(简介、基本使用、API、手写实现 Promise、async与await)(五)

5.4 Promise.catch()实现

5.4.1 catch()实现

// 定义 Promise 的 catch 方法
Promise.prototype.catch = function (onRejected) {
  // catch 方法中执行的是失败的回调函数
  // 与 then 差别为只有失败的回调函数,可以直接使用then
  return this.then( undefined, onRejected )
}
let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('Error')
        }, 1000)
      })
      const res1 = p1.catch(reason=>{
        console.log(reason)
      })
      console.log(res1)

5.4.2 异常穿透实现

在then的链式调用的过程中不需要对失败的结果进行处理,主要在最后加一个catch方法处理失败的结果即可。

未实现异常穿透测试:

let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('Error')
        }, 1000)
      })
      p1.then((v) => {
        console.log(111)
      })
        .then((v) => {
          console.log(222)
        })
        .catch((r) => {
          console.log(r)
        })

原因:

实现异常穿透:

// 定义 Promise 的 then 方法
Promise.prototype.then = function (onResolved, onRejected) {
  const self = this // 保存调用then的Promise对象
  // 判断失败的回调函数
  // 由于报错造成的原因是失败的回调函数为undefined
  // 所以当失败的回调函数为未定义时候,补充一个失败回调
  // 让其报错
  if (typeof onRejected !== 'function' ) {
    onRejected = reason => {
      throw reason
    }
  }
  ......
}

测试:

let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          // reject('Error')
          resolve('OK')
        }, 1000)
      })
      p1.then((v) => {
        console.log(111)
        throw 'ERROR'
      })
        .then((v) => {
          console.log(222)
        })
        .catch((r) => {
          console.log(r)
        })

5.4.3 值传递实现

官方的then()在不指定成功的回调函数也可以继续向下执行

let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          // reject('Error')
          resolve('OK')
        }, 1000)
      })
      p1.then()
        .then((v) => {
          console.log(222)
        })
        .then((v) => {
          console.log(333)
        })
        .catch((r) => {
          console.log(r)
        })

实现方法,与异常穿透类似,在没有成功的回调函数的时候一样指定一个成功的回调函数

// 定义 Promise 的 then 方法
Promise.prototype.then = function (onResolved, onRejected) {
  const self = this // 保存调用then的Promise对象
  ......
  // 没有传递成功的回调函数
  // 给一个默认的成功回调函数
  if (typeof onResolved !== 'function') {
    onResolved = value => {
      return value //将resolve中传递的值,即Promise的结果向后传递
    }
  }
  ......
}

测试:

let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          // reject('Error')
          resolve('OK')
        }, 1000)
      })
      p1.then()
        .then((v) => {
          console.log(222)
        })
        .then((v) => {
          console.log(333)
        })
        .catch((r) => {
          console.log(r)
        })

5.5 resolve() 实现

// 传递的为Promise对象,则返回的Promise的状态由传入的决定
// 传入的为其他值,则返回的Promise对象为成功
Promise.resolve(value) {
  return new Promise((resolve, reject) => {
    if (value instanceof Promise) {
      // 为Promise对象,肯定可以调用then
      value.then(v => {
        resolve(v)
      }, r => {
        reject(r)
      })
    } else {
      resolve(value)
    }
  })
}

测试:

const p1 = Promise.resolve('OK')
      const p2 = Promise.resolve(
        new Promise((resolve, reject) => {
          resolve('OK~~~')
        })
      )
      const p3 = Promise.resolve(
        new Promise((resolve, reject) => {
          reject('err')
        })
      )
      console.log(p1)
      console.log(p2)
      console.log(p3)

5.6 reject() 实现

无论传递什么值都返回一个失败的Promise对象

Promise.reject = function(value) {
  return new Promise((resolve, reject) => {
    reject(value)
  })
}

测试:

const p1 = Promise.reject('OK')
      const p2 = Promise.reject(
        new Promise((resolve, reject) => {
          resolve('OK~~~')
        })
      )
      const p3 = Promise.reject(
        new Promise((resolve, reject) => {
          reject('err')
        })
      )
      console.log(p1)
      console.log(p2)
      console.log(p3)


相关文章
|
3月前
|
前端开发 JavaScript API
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
在前端开发中,异步编程至关重要。本文详解了同步与异步的区别,通过生活化例子帮助理解。深入讲解了 Promise 的概念、状态及链式调用,并引入 async/await 这一语法糖,使异步代码更清晰易读。还介绍了多个异步任务的组合处理方式,如 Promise.all 与 Promise.race。掌握这些内容,将大幅提升你的异步编程能力,写出更优雅、易维护的代码,助力开发与面试!
253 0
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
|
3月前
|
前端开发 JavaScript API
JavaScript异步编程:从Promise到async/await
JavaScript异步编程:从Promise到async/await
472 204
|
前端开发 JavaScript 开发者
Async 和 Await 是基于 Promise 实现
【10月更文挑战第30天】Async和Await是基于Promise实现的语法糖,它们通过简洁的语法形式,借助Promise的异步处理机制,为JavaScript开发者提供了一种更优雅、更易于理解和维护的异步编程方式。
265 1
|
7月前
|
前端开发 安全 JavaScript
Promise 这个新 API 真香!
本文首发于公众号【沉浸式趣谈】,探讨 ES2025 新特性 `Promise.try()` 的强大功能。该方法可将同步或异步函数统一包装为 Promise,解决同步错误捕获难题,简化代码逻辑。通过实际案例分析,展示其在 API 调用、混合任务链及文件操作中的应用优势。`Promise.try()` 让 Promise 使用更健壮、一致,是开发者工具箱的有力补充。更多技术分享,请访问我的博客 https://yaolifeng.com 或点赞、评论、转发支持!
164 13
|
9月前
|
前端开发
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
413 57
|
前端开发
如何使用async/await解决Promise的缺点?
总的来说,`async/await` 是对 Promise 的一种很好的补充和扩展,它为我们提供了更高效、更易读、更易维护的异步编程方式。通过合理地运用 `async/await`,我们可以更好地解决 Promise 的一些缺点,提升异步代码的质量和开发效率。
258 64
|
前端开发 JavaScript
async/await和Promise在性能上有什么区别?
性能优化是一个综合性的工作,除了考虑异步模式的选择外,还需要关注代码的优化、资源的合理利用等方面。
354 63
|
API 计算机视觉
MLDL之API:关于各国内外大平台API简介、使用方法之详细攻略
MLDL之API:关于各国内外大平台API简介、使用方法之详细攻略
|
1月前
|
缓存 监控 前端开发
顺企网 API 开发实战:搜索 / 详情接口从 0 到 1 落地(附 Elasticsearch 优化 + 错误速查)
企业API开发常陷参数、缓存、错误处理三大坑?本指南拆解顺企网双接口全流程,涵盖搜索优化、签名验证、限流应对,附可复用代码与错误速查表,助你2小时高效搞定开发,提升响应速度与稳定性。