每天3分钟,重学ES6-ES12(十)Promise参数实例方法介绍(二)

简介: 每天3分钟,重学ES6-ES12(十)Promise参数实例方法介绍

Promise有哪些实例方法

console.log(Object.getOwnPropertyDescriptors(Promise.prototype))

1686836326661.jpg

then方法

接受两个参数

  • then方法是Promise对象上的一个方法:它其实是放在Promise的原型上的 Promise.prototype.then
  • then方法接受两个参数:
  • fulfilled的回调函数:当状态变成fulfilled时会回调的函数;
  • reject的回调函数:当状态变成reject时会回调的函数;

多次调用

  • 一个Promise的then方法是可以被多次调用的:
  • 每次调用我们都可以传入对应的fulfilled回调;
  • 当Promise的状态变成fulfilled的时候,这些回调函数都会被执行;

返回值

  • then方法本身是有返回值的,它的返回值是一个Promise,所以我们可以进行如下的链式调用:
  • 但是then方法返回的Promise到底处于什么样的状态呢?
  • Promise有三种状态,那么这个Promise处于什么状态呢?
  • 当then方法中的回调函数本身在执行的时候,那么它处于pending状态;
  • 当then方法中的回调函数返回一个结果时,那么它处于fulfilled状态,并且会将结果作为resolve的参数;
  • 情况一:返回一个普通的值;
  • 情况二:返回一个Promise;
  • 情况三:返回一个thenable值;
  • 当then方法抛出一个异常时,那么它处于reject状态;

catch方法

多次调用

  • catch方法也是Promise对象上的一个方法:它也是放在Promise的原型上的Promise.prototype.catch
  • 一个Promise的catch方法是可以被多次调用的:
  • 每次调用我们都可以传入对应的reject回调;
  • 当Promise的状态变成reject的时候,这些回调函数都会被执行;

返回值

  • 事实上catch方法也是会返回一个Promise对象的,所以catch方法后面我们可以继续调用then方法或者catch方法:
  • 下面的代码,后续是catch中的err2打印,还是then中的res打印呢?
  • 答案是res打印,这是因为catch传入的回调在执行完后,默认状态依然会是fulfilled的;
const promise = new Promise((resolve, reject) => {
  reject("111111")
})
promise.catch(err => {
  console.log("err1:", err)
}).catch(err2 => {
  console.log("err2:", err2)
}).then(res => {
  console.log("res result:", res)
})
// err1: 111111
// res result: undefined
  • 那么如果我们希望后续继续执行catch,那么需要抛出一个异常:
const promise = new Promise((resolve, reject) => {
  reject("111111")
})
promise.then(res => {
  console.log("res:", res)
}).catch(err => {
  console.log("err:", err)
  throw new Error("catch return value")
}).then(res => {
  console.log("res result:", res)
}).catch(err => {
  console.log("err result:", err)
})
// err: 111111
// err result: Error: catch return value

finally方法

  • finally是在ES9(ES2018)中新增的一个特性:表示无论Promise对象无论变成fulfilled还是reject状态,最终都会 被执行的代码。
  • finally方法是不接收参数的,因为无论前面是fulfilled状态,还是reject状态,它都会执行。

代码演示

const promise = new Promise((resolve, reject) => {
  // resolve("resolve message")
  reject("reject message")
})
promise.then(res => {
  console.log("res:", res)
}).catch(err => {
  console.log("err:", err)
}).finally(() => {
  console.log("finally code execute")
})




相关文章
|
11月前
|
前端开发 API
每天3分钟,重学ES6-ES12(十一)Promise的类方法
每天3分钟,重学ES6-ES12(十一)Promise的类方法
62 0
|
11月前
|
前端开发
每天3分钟,重学ES6-ES12(十)Promise参数实例方法介绍(一)
每天3分钟,重学ES6-ES12(十)Promise参数实例方法介绍
34 0
|
11月前
|
前端开发 API
每天3分钟,重学ES6-ES12(九)Promise简单介绍
每天3分钟,重学ES6-ES12(九)Promise简单介绍
57 0
node笔记记录11promise的实例方法.then
node笔记记录11promise的实例方法.then
49 0
node笔记记录11promise的实例方法.then
|
2月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
16 1
|
2月前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
26 4
|
2月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。
|
3月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
3月前
|
前端开发 JavaScript UED
JavaScript中的异步编程和Promise
【2月更文挑战第3天】在Web开发中,JavaScript是一门非常重要的编程语言,而异步编程是JavaScript中的一个关键概念。本文将介绍JavaScript中的异步编程特点,以及如何使用Promise来更加优雅地处理异步操作,帮助开发者更好地理解和应用这一技术。
18 3
|
3月前
|
前端开发 JavaScript 数据处理
JavaScript中的异步编程及Promise对象
【2月更文挑战第3天】 传统的JavaScript编程模式在处理异步任务时常常会导致回调地狱和代码可读性较差的问题,而Promise对象的引入为解决这一问题提供了一种优雅的解决方案。本文将介绍JavaScript中的异步编程方式以及Promise对象的使用方法和优势,帮助读者更好地理解和运用异步编程技术。
22 8