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)


相关文章
|
21天前
|
前端开发 JavaScript
setTimeout、Promise、Async/Await 的区别
`setTimeout` 是用于延迟执行函数的简单方法;`Promise` 表示异步操作的最终完成或失败;`Async/Await` 是基于 Promise 的语法糖,使异步代码更易读和维护。三者都用于处理异步操作,但使用场景和语法有所不同。
|
21天前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:深入了解 Promise 和 async/await
【10月更文挑战第8天】JavaScript 中的异步编程:深入了解 Promise 和 async/await
|
18天前
|
前端开发 JavaScript UED
深入了解JavaScript异步编程:回调、Promise与async/await
【10月更文挑战第11天】深入了解JavaScript异步编程:回调、Promise与async/await
10 0
|
2月前
|
前端开发 JavaScript
解决异步问题,教你如何写出优雅的promise和async/await,告别callback回调地狱!
该文章教授了如何使用Promise和async/await来解决异步编程问题,从而避免回调地狱,使代码更加清晰和易于管理。
解决异步问题,教你如何写出优雅的promise和async/await,告别callback回调地狱!
|
4月前
|
前端开发 JavaScript
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
127 1
|
3月前
|
前端开发 JavaScript 开发者
探索前端开发中的异步编程:Promise与Async/Await
在现代前端开发中,处理异步操作是至关重要的。本文将深入探讨异步编程的核心概念,重点比较JavaScript中的Promise与Async/Await两种异步编程方式。通过实例和比较,读者将能够理解这两种方法的优缺点,如何在实际开发中选择适合的异步编程模式,从而编写更简洁、可维护的代码。
|
4月前
|
前端开发 JavaScript
JavaScript异步编程:Promise与async/await的深入探索
【7月更文挑战第9天】Promise和async/await是JavaScript中处理异步编程的两大利器。Promise为异步操作提供了统一的接口和链式调用的能力,而async/await则在此基础上进一步简化了异步代码的书写和阅读。掌握它们,将使我们能够更加高效地编写出清晰、健壮的异步JavaScript代码。
|
6月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
64 1
|
6月前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
91 4
|
6月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。