Promise深入剖析

最新推荐文章于 2022-09-16 21:46:43 发布
最新推荐文章于 2022-09-16 21:46:43 发布
阅读量551 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DWX_top/article/details/126352411
版权

Promise深入剖析

文章目录

一、前提须知：

同步异步：

  • 现实生活中同步与异步操作
    1. 同步：烧水10分钟+准备茶叶3分钟 一共花了13分钟
    2. 异步：在烧水得10分钟里面去准备茶叶 一共花了10分钟
  • 软件世界中
    1. 同步：当一个操作开始执行、主程序需要等它完成、才能继续下一步操作（一般是下一步得程序需要上一步的数据）
    2. 异步：当一个操作开始执行后、主程序不会等它完成、直接就会执行下一步。（此时该操作可以跟主程序同时并发执行）

回调函数：

  1. 将函数callback作为参数传入给函数fun、在函数fun中以形参方式进行调用，函数call就称为回调函数。

    /* 回调函数 */
function callback(){
console.log('我是一个回调函数');
}
/* 普通函数 */
function fun(cb){
cb() //作为形参传进来、然后将形参执行
}
// 将回调函数作为参数，传进去
fun(callback) //我是一个回调函数

  2. 回调地狱（）

    image-20220813162703732

  3. 艺术图展示

    image-20220813162823819

  4. 回调地狱、其实就是回调函数嵌套过多导致的

    image-20220813163018432

二、Promise的介绍

介绍：

  1. Promise 是异步编程的一种更优雅的解决方案，比传统的解决方案——回调函数——更合理和更强大。
  2. Promise就是对异步操作的封装、封装异步文件读写
  3. 就是一个构造函数、通过new关键字实例化对象、接受函数为参数

特点：

  1. 对象的状态不受外界影响、Promise代表一个异步操作、有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）
  2. 只有异步操作的结果、可以决定当前是哪一个状态、其他的操作都无法改变这个状态。
  3. 一旦状态改变、就不会再变、任何时候都可以得到这个结果。Promise对象状态改变只有两种可能
    • 从pending变为fulfilled状态
    • 从pending变为rejected状态
    • 只要发生改变就定型了（ps:一诺千金真男人）
  4. image-20220813165233082

参数梳理：

Promise()

new Promise((resolve,reject)=>{})
  1. Promise()里面是一个箭头函数、作为参数
  2. 参数函数里面有两个参数
    • resolve:成功函数
    • reject:失败函数

Promise实例

const p1 = new Promise((resolve, reject) => {
    reject('我是失败结果')// 调用函数, 使当前Promise对象的状态改成rejected
        })

image-20220813170900014

  1. Promise实例有两个属性

    • PromiseState:状态

    • PromiseResult:结果

  2. Promise的状态

    1. pending（等待）
    2. fulfiled （满足）
    3. rejected （拒绝）

  3. Promise状态改变

    1. resolve(): 调用函数, 使当前Promise对象的状态改成fulFilled
    2. reject(): 调用函数,使当前Promise对象状态改成rejected
    3. 想要输出的结果都在resolve()、reject()里面去写
    4. 注意事项：
      1. Promise状态的改变是一次性的，改了就定死了
      2. 如果不改变Promise状态，那就一直是pending，不会运行其他结果、一直持续那个等待的那个状态。

三、Promise的方法

then方法（搞定它你就懂了）

  • 两个参数
    1. 第一个成功回调函数（fulfiled 状态执行）
    2. 第二个失败回调函数（rejected 状态执行）
    3. 注意1：只能通过resolve,reject改变Promise的状态值，从而在then方法里、通过根据状态值来决定执行第一个回调函数、还是执行第二个回调函数（大白话）
  • 返回值
    • 是一个Promise对象
实例1：不带参数的执行

白话理解：这个promise就是一个标准好男人、只要他结婚了就坚决不会去外面找小三。（先入为主、后面的代码不起作用）

const p = new Promise((resolve,reject)=>{
    // 通过调用resolve、传递参数当前Promise对象的结果
    reject('这个是失败的结果')  //将PromiseState状态改为rejected
    resolve('这个是成功的结果') //状态只能先入为主、这个改变不了
})

/* .then方法函数
    参数：
        1、两个参数都是函数
        2、第一个参数是成功回调函数
        3、第二个参数是失败回调函数
    返回值：
        是一个Promise对象
*/
p.then(()=>{
    //当Promise的状态使fulfilled时执行
    console.log('打印我第一个成功函数');
},()=>{
    //当Promise的状态时rejected时, 执行
    console.log('打印我第二个失败函数');
})

console.dir(p);

image-20220814123935394

实例2：带参数的执行

  • 在then方法的参数函数中、通过形参（value）使用Promsie对象的结果（reslove）
const p = new Promise((resolve,reject)=>{
    let obj = {
        name:'zjf',
        age:19
    }
    // 通过调用resolve、传递参数当前Promise对象的结果
    resolve(obj) //传入一个对象
    reject('这个是失败的结果')  //将PromiseState状态改为rejected
})

/* .then方法函数
    参数：
        1、两个参数都是函数
        2、第一个参数是成功回调函数
        3、第二个参数是失败回调函数
    返回值：
        是一个Promise对象
*/
p.then((value)=>{
    //当Promise的状态使fulfilled时执行
    console.log('打印我第一个成功函数');
    console.log(value);
},(error)=>{
    //当Promise的状态时rejected时, 执行
    console.log('打印我第二个失败函数');
})
console.dir(p);

image-20220814125208232

实例3：then方法中的return

  1. 通过resovle(obj)会传值给，then(成功函数)
  2. 成功函数中return(obj2),会传值给下一个then（成功函数）
  3. 成功函数中return（不存在）、会给失败函数的error(result)
  4. 失败函数中return（obj4）还是会传给成功函数
  5. 成功函数中不return,只会执行。并没有传值

结论：

  1. 在then方法中,通过return将返回的Promise实例改为fulfilled状态
  2. 在then方法中,出现代码错误,将返回的Promise实例改为rejected状态

image-20220814134343915

const p = new Promise((resolve,reject)=>{
    let obj = {
        name:'obj',
        age:19
    }
    // 通过调用resolve、传递参数当前Promise对象的结果
    resolve(obj) //传入一个对象
    reject('这个是失败的结果')  //将PromiseState状态改为rejected
})

/* .then方法函数
    参数：
        1、两个参数都是函数
        2、第一个参数是成功回调函数
        3、第二个参数是失败回调函数
    返回值：
        是一个Promise对象
*/
p
/* 第一个then方法
    使用value接受obj的值
    创建一个obj2对象并通过return传值给下一个then
*/
.then((value)=>{
    let obj2 = {
        name:'obj2',
        age:20
    }
    //当Promise的状态使fulfilled时执行
    console.log('打印我第一个then成功函数');
    console.log(value); //打印接受到的obj

    // 在then方法回返回一个新的Promise实例，状态时pending
    return obj2
},(error)=>{
    //当Promise的状态时rejected时, 执行
    console.log('打印我第一个失败函数');
})
/* 
    第二个then方法
    接受obj2的通过return传来的值
        
*/ 
.then((value)=>{
    console.log('打印我第二个then成功函数');
    console.log(value);
    // 返回一个不存在的值
    return obj3
},(error)=>{
    console.log('打印我第二个then失败函数');
    console.log(error);
})

/* 
    第三个then方法
    当接受一个不存在的值（reject）
    使用第二个参数函数接受值
*/
.then((value)=>{
    console.log(value);
},(error)=>{
    let obj4 = {
        name:'obj4',
        age:22
    }
    console.log(error);
    return obj4
})
/* 
    第四个then方法
    当在第二个函数中、创建一个对象
    接受的值还是在第一个函数中接受
*/

.then((value)=>{
    let obj5 = {
        name:'obj5',
        age:33
    }
    console.log(value); //{name: 'obj4', age: 22}
},(error)=>{
    console.log(error);
})
/* 
    第五个then方法
    在第一个函数中、创建一个对象
    但是不return这个值
*/
.then((value)=>{
    console.log('让我看看第五个then成功');
    console.log(value);
},(error)=>{
    console.log('让我看看第五个then失败');
})

实例4：状态没有改变、then方法不会执行

        // 如果Promise的状态改变,then里的方法不会执行
const p = new Promise((resolve, reject) => {
    let a = 1
    console.log('我啥也没干啊');
}).then((value) => {
	console.log("成功")
},(reason) => {
console.log("失败")
})
//我啥也没干啊

catch方法

  • 其实这个方法、就是then方法里面的第二个方法作用一样
  • 但是这个方法可以增加代码的可读性，让你一眼就知道这个方法是干嘛的

参数名：根据官方来，最好形参名定为reason

const p = new Promise((resolve, reject) => {
reject()
console.log(a)
})

// 思考: catch中的参数函数在什么时候被执行
//  1. 当Promise的状态改为rejcted.被执行
//  2. 当Promise执行过程出现代码错误时,被执行
p.catch((reason => {
console.log("失败", reason) //失败 undefined
}))

优化代码：此段代码是模仿杰哥课堂中的代码

// 封装ajax请求
function getData(url, data = {}){
	return new Promise((resolve, reject) => {
  	$.ajax({
      // 发送请求类型
    	type: "GET",
      url: url,
      data: data,
      success: function (res) {
      	// 修改Promise状态为成功, 修改Promise的结果res
        resolve(res)
      },
      error:function (res) {
      	// 修改Promise的状态为失败,修改Promise的结果res
        reject(res)
      }
    })
  }
}

// 调用函数
getData("data1.json")
  .then((data) => {
  	// console.log(data)
    const { id } = data
    return getData("data2.json", {id})
  })
  .then((data) => {
  	// console.log(data)
    const { usename } = data
    return getData("data3.json", {usename})
  })
  .then((data) => {
  	console.log(data)
  })

四、Promise.all和Promise.race

Promise.all（）

  1. 将多个实例组装成一个新实例

  2. 成功的时候返回一个成功的数组

  3. 失败的时候返回最先被reject失败状态的值

let wake = (time) => {
  // 返回一个新的Promise对象
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time}后返回成功结果`)
    }, time);
  })
}
// 使用promise去接受
// wake(5).then(
//   (res) => {
//     console.log(res); //5后返回成功结果
//   }
// )

//使用promise.all接受
let p1 = wake(1999);
let p2 = wake(19);
Promise.all([p1, p2])  //返回一个成功的数组
.then(res => {
  console.log('返回一个成功数组：',res); //['1999后返回成功结果', '19后返回成功结果']
  let [res1, res2] = res; //结构赋值
  console.log(res1, res2);
}).catch(err => {
  console.log(err);//放回第一个错误
})

Prmise.race

  1. 将多个实例进行筛选
  2. 多个实例、那个获取的快、不管是成功、还是失败、先到先得。
let wake = (time) => {
  // 返回一个新的Promise对象
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time}后返回成功结果`)
    }, time);
  })
}
// 使用promise去接受
// wake(5).then(
//   (res) => {
//     console.log(res); //5后返回成功结果
//   }
// )

//使用promise.all接受
let p1 = wake(1999);
let p2 = wake(19);
Promise.race([p1, p2])  //返回第一个成功的
.then(res => {
  console.log('返回第一个成功的：',res);  //返回第一个成功的： 19后返回成功结果

}).catch(err => {
  console.log(err);
})

五、async、await理解与用法

理解：其实本质就是一个语法糖、ES7提出的基于Promise的解决异步的最终方案。

async:

  1. 加在函数前的修饰符、将一个普通函数变成返回值变为Promise对象、可以在async函数后面直接.then/.catch方法
  2. return一个对象data、相当于 return Promise.resolve(data)
  3. return Promise 得到Promise本身
  4. 函数内部抛出错误、会被then的第二个函数、catch方法捕获到
// 一个普通的函数加上 async
async function fun(){
  let obj = {
    name:'zjf',
    age:18
  }
  return obj
}
// 可以将一个普通函数值接写成返回一个promise
fun()
.then((value)=>{
  console.log('我是then方法'); //结果我是then方法
  console.log(value);    //结果{name: 'zjf', age: 18}
})
.catch((reson)=>{
  console.log('我是reson方法');
  console.log(reson);
})

await:

  1. await也是一个修饰符、只能放在async定义的函数、理解为等待
  2. await修饰Promise对象时如等3秒、只能获取到reslove成功函数的值、且等3秒之后才会执行、继续往下执行
  3. 当出现错误无法捕获、因为await只拿到了resolve成功的、没有reject失败的。
  4. 如果需要捕获错误、只能通过try、catch方法来捕获错误
let p = new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve('3000后成功结果')
  },3000)
})

// 一个普通的函数加上 async
async function fun(){
  let obj = {
    name:'zjf',
    age:18
  }
  console.log('我先不等了'); //第一时间就出来了
  let reson = await p
  console.log(reson);    //等到3000后成功结果才出来
}
//执行函数
fun()

在async函数里通过try、catch来获取错误

let p = new Promise((resolve,reject)=>{
  setTimeout(()=>{
    reject('这是失败结果')
  },3000)
})

// 一个普通的函数加上 async
async function fun(){
  try {
    let obj = {
    name:'zjf',
    age:18
  }
  console.log('我先不等了'); //第一时间就出来了
  let reson = await p
  } catch (error) {
    console.log(error);   //等到3000后成功结果才出来
    //这是失败结果
  }
}
//执行函数
fun()

在函数外面.catch方法

  1. 可以接受reject函数里面的值
  2. 无法接受其他报错、得到的错误
let p = new Promise((resolve,reject)=>{
  setTimeout(()=>{
    reject('这是失败结果')
  },3000)
})

// 一个普通的函数加上 async
async function fun(){
    let obj = {
    name:'zjf',
    age:18
  }
  console.log('我先不等了'); //第一时间就出来了
  let reson = await p

}
//执行函数
fun().catch((error)=>{
  console.log(error);  //这是失败结果
})

在async中是异步执行

let p = new Promise((resolve,reject)=>{
  setTimeout(()=>{
    let obj = {
    name:'zjf',
    age:18
  }
    resolve('这是成功结果'+obj)
  },3000)
})

// 一个普通的函数加上 async
// 异步任务
async function fun(){
  console.log('我先不等了'); //第一时间就出来了
    setTimeout(()=>{
      console.log('我是5000秒执行'); //最后执行
  },5000)
  let reson = await p
  console.log(reson); //这是成功结果[object Object]
}
//执行函数
fun()
// 运行结果：
// 我先不等了
//  这是成功结果[object Object]
//  我是5000秒执行
前端达闻西
关注
C#异步编程模型：Task并行与async/await深入剖析
java专栏
04-22 833
C#提供了基于Task并行库（TPL）的Task异步模型，以及async/await语法糖，极大地简化了异步编程的复杂性。通过本篇深入剖析，您应已全面理解C#中的Task并行与async/await异步编程模型，掌握了如何利用这些机制编写高效、非阻塞性的异步代码。结合文中提供的代码示例与注释，您可以轻松地将异步编程应用于实际项目中，并根据需要进行更深入的学习与优化。以上各部分已包含丰富的代码示例，并附有详细注释，阐述了Task并行、async/await关键字的使用以及异步编程的最佳实践。
Promise源码分析
A20201130的博客
03-27 934
实现原理：说到底，Promise 也还是使用回调函数，只不过是把回调封装在了内部，使用上一直通过 then 方法的链式调用，使得多层的回调嵌套看起来变成了同一层的，书写上以及理解上会更直观和简洁一些。 我这里只是实现了部分的功能，并非和源码一模一样！希望里面不足的地方，小伙伴们多多指正 //我们首先来定义一个MyPromise类，我在这里使用立即执行函数的方式，防止变量全局污染。 const MyPromise = (() => { // 定义三种状态 const PENDING
Promise深入理解
zgh472365411的博客
09-16 520
Promise深入理解
Promise 从基础到深入
草木红的博客
05-20 186
promise是ES6中的特性，是异步编程的一种解决方案。 promise的作用就是对异步请求的封装。 promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外） (一) promise 基础 new Promise( (resolve, reject)=>{ //一段耗时的异步操作 //判断操作是否成功 if(true){ resolve('成功');//操作成功，并传递变量 }else{ reject('失败');//操作失败，并传递变.
剖析 Promise 之基础篇
一个有情怀的程序猿博客
07-14 165
随着浏览器端异步操作复杂程度的日益增加，以及以 Evented I/O 为核心思想的 NodeJS 的持续火爆，Promise、Async 等异步操作封装由于解决了异步编程上面临的诸多挑战，得到了越来越广泛的应用。本文旨在剖析 Promise 的内部机制，从实现原理层面深入探讨，从而达到“知其然且知其所以然”，在使用 Promise 上更加熟练自如。如果你还不太了解 Promise，推荐阅读下 promisejs.org 的介绍。 是什么 Promise 是一种对异步操作的封装，可以通过独立的接口添..
Promise 源码解析
weixin_34067102的博客
05-07 243
写promise的时候，发现自己应用了树，链表，前度遍历等方法，觉得对于部分想了解promise机制，并且加深数据结构学习的同学有些许帮助，决定写一篇文章分享出来。不过文笔实在堪忧，没有耐心看下去的同学，可以直接看源码。源码地址 . promise的状态是什么时候变化的 ? 1:通过new Promise()生成的promise的状态变化过程: 当调用resolve时: 情况1: ...
真丶深入理解JavaScript异步编程（二）：Promise 原理
一只小鹰
12-16 341
原文地址： https://www.jeremyjone.com/771/ ，转载请注明。 有了前文的基础，我们深入剖析一下 Promise 的原理。 Promise 由于 JS 的单线程和任务队列，造成了很多函数嵌套，当这种嵌套激增，就会造成所谓的 回调地狱，这是我们深恶痛绝的。 创建一个 Promise 基于几方面原因，JS 催生了 Promise，它解决了很多问题。先看用法： new Promise( ( resolve, // 成功状态回调 reject // 失败状态回调
Netty 4异步编程模式深入剖析
在本章中，我们将深入了解Netty 4框架的概述，包括其定义、特点以及在异步编程中的应用。 ## Netty是什么？ Netty是一个基于Java NIO的网络应用框架，提供了高度优化的、可重用的异步事件驱动的网络组件，使得快速...
分布式系统一致性协议：深入剖析CAP定理与共识算法
[分布式系统一致性协议：深入剖析CAP定理与共识算法](https://img-blog.csdnimg.cn/70f02a2a1e264559b86005b996ae34f7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5...
分布式系统一致性协议：深入剖析 Paxos、Raft、ZAB 等协议
[分布式系统一致性协议：深入剖析 Paxos、Raft、ZAB 等协议](https://www.scylladb.com/wp-content/uploads/paxos-diagram.png) # 1. 分布式系统一致性概述 分布式系统中的一致性是指系统中各个节点对共享数据保持...
Promise源码分析（附带Promise的正确打开方式）
漫漫前端路，进一寸有进一寸的欢喜
07-05 3600
你还在被大佬按在地上摩擦吗？我教你Promise底层原理，让你感受一下完虐大佬的感觉。fell 倍儿爽！
promise的源码解析 promise方法源码编写
weixin_44292923的博客
01-07 965
promise的源码解析 promise方法源码编写
Promise 源码分析与实现
xiongfang1105的专栏
03-23 342
Promise 源码分析与实现(学习笔记) 实现 Promise 代码的核心逻辑 1.Promise 就是一个类，在执行这个类的时候需要传递一个执行器进去，这个执行器会立即执行 Promise 中有三种状态，分别为 成功 fulfilled 失败 rejected 等待 pending pending -> fulfilled pending -> rejected resolve 和 reject 函数就是用来更改状态的 resolve: fulfilled reject: rej
对标阿里-Promise 源代码解析
fanxw1984的博客
08-01 310
本文从 Promise 的源代码入手，分析Promise是如何实现的。并不涉及Promise如何使用. 适用于已经熟悉使用Promise，同时希望深入了解Promise的开发人员 构建 从package.json中不难找到build相关的命令都在从build.js中实现 同时分析根目录下的index.js和core.js发现，代码的引用都是lib目录，但初始的源代码中却没有这个目录，大致猜...
Promise 实现源码
weixin_41643133的博客
07-26 225
转自知乎无名之辈,分析得非常非常好 一、基础版本 class Promise { callbacks = []; constructor(fn) { fn(this._resolve.bind(this)); } then(onFulfilled) { this.callbacks.push(onFulfilled); } _resolve(value) { this.callbacks.forEach(fn =
手写Promise
Sixology的博客
08-13 160
(function (window) { const PENDING = 'pending'; const RESOLVED = 'resolved'; const REJECTED = 'rejected'; /* Promise：构造函数 excutor：执行器函数（同步执行） * */ function Promise(excutor) { const self = this; self.status = PENDING; //给Promise
ES6从入门到入狱-promise篇
热门推荐
往事不回头,余生不将就
04-10 1万+
ES6之promise 1.什么是Promise? 抽象表达:Promise，是JS进行异步编程的一种新的解决方案 具体表达:从语法上说Promise是一个构造函数， 从功能上说Promise对象是用来封装异步操作并可以获取其结果 2.Promise 状态 promise总共有三个状态，初始化状态为pending， 执行成功状态更改为resolved，执行失败状态更改为rejected co...
这次彻底搞懂 Promise(手写源码多注释篇)
油墨香^-^的博客
08-15 264
promise 是 js 里面非常重要的一部分，搞懂了 promise 才能更好的去理解 async,await 和 generator。但是往往很多时候就是不理解 promise 的机制，所以这次通过一步步实现一个 promise 来加深自己的印象，提高自己的思维。...
JavaScript框架篇——promise基础
weixin_45273807的博客
08-15 262
JS是单线程语言 为什么JS是单线程的? JavaScript的单线程，与它的用途有关。 作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。 例如: 如果JS是多线程的现在有一个线程要修改元素中的内容, 一个线程要删除该元素, 这时浏览器应该以哪个线程为准？所以JS中的代码都是串行的, 前面没有执行完毕后面不能执行。...
深入剖析Vue.js异步DOM更新策略：nextTick机制详解
`nextTick`在这里扮演了延迟执行器的角色，确保DOM操作在所有微任务（如事件处理、Promise回调等）执行完毕后进行，从而确保视图的一致性。 回到示例中的代码，当`handleClick`方法执行时，`this.test`被设置为`'...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端达闻西

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值