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

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

19c2e7a9bfbb7f5e8c7d744db995e29.png

每天3分钟,重学ES6-ES12文章汇总

前言

今天开始和大家一起系统的学习ES6+,每天3分钟,用一把斗地主的时间,重学ES6+,今天介绍的是ES6中新增的内容Promise的then、catch、finally方法,都属于Promise的实例方法,都是存放在Promise的prototype上的。

Promise回调函数Executor

Executor是在创建Promise时需要传入的一个回调函数,这个回调函数会被立即执行,并且传入两个参数:

new Promise((resovle,reject)=>{
    console.log('Executor')
})
  • 通常我们会在Executor中确定我们的Promise状态:
  • 通过resolve,可以兑现(fulfilled)Promise的状态,我们也可以称之为已决议(resolved);
  • 通过reject,可以拒绝(reject)Promise的状态;
  • 这里需要注意:一旦状态被确定下来,Promise的状态会被 锁死,该Promise的状态是不可更改的
  • 在我们调用resolve的时候,如果resolve传入的值本身不是一个Promise,那么会将该Promise的状态变成兑现(fulfilled);
  • 在之后我们去调用reject时,已经不会有任何的响应了(并不是这行代码不会执行,而是无法改变Promise状态);

代码演示promise 三种状态

const promise = new Promise((resolve, reject) => {
})
promise.then(res => {
}, err => {
})
// 完全等价于下面的代码
// 注意: Promise状态一旦确定下来, 那么就是不可更改的(锁定)
new Promise((resolve, reject) => {
  // pending状态: 待定/悬而未决的
  console.log("--------")
  reject() // 处于rejected状态(已拒绝状态)
  resolve() // 处于fulfilled状态(已敲定/兑现状态)
  console.log("++++++++++++")
}).then(res => {
  console.log("res:", res)
}, err => {
  console.log("err:", err)
})

resovle不同值的区别

  • 情况一:如果resolve传入一个普通的值或者对象,那么这个值会作为then回调的参数;
  • 情况二:如果resolve中传入的是另外一个Promise,那么这个新Promise会决定原Promise的状态:

代码演示

// 1.传入Promise的特殊情况
const newPromise = new Promise((resolve, reject) => {
     // resolve("aaaaaa")
    reject("err message")
})
new Promise((resolve, reject) => {
   // pending -> fulfilled
 resolve(newPromise)
}).then(res => {
   console.log("res:", res)
}, err => {
   console.log("err:", err)
})
// err:reject message
  • 情况三:如果resolve中传入的是一个对象,并且这个对象有实现then方法,那么会执行该then方法,并且根据 then方法的结果来决定Promise的状态:
new Promise((resolve, reject) => {
  // pending -> fulfilled
  const obj = {
    then: function(resolve, reject) {
      // resolve("resolve message")
      reject("reject message")
    }
  }
  resolve(obj)
}).then(res => {
  console.log("res:", res)
}, err => {
  console.log("err:", err)
})
// err:reject message


相关文章
|
11月前
|
前端开发 API
每天3分钟,重学ES6-ES12(十一)Promise的类方法
每天3分钟,重学ES6-ES12(十一)Promise的类方法
62 0
|
11月前
|
前端开发
每天3分钟,重学ES6-ES12(十)Promise参数实例方法介绍(二)
每天3分钟,重学ES6-ES12(十)Promise参数实例方法介绍
48 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