promise详解

Promise详解-1:初识Promise 不懂Promise?看这篇教程就够了 阅读详情

##1.创建Promise的时候是立即执行的(同步)

let p = new Promise(function(resolve, reject){
  console.log("new promise"); //同步执行
  resolve("success");
});
console.log("after new Promise");
p.then(function(value){ //异步
  console.log(value);
});
输出
"new promise"
"after new Promise"
"success"

但在创建Promise对象时,作为Promise函数内部代码是会被立即执行的,只是执行的代码可以是异步代码
##2.Promise then() 是异步的

let p = new Promise(function(resolve, reject){
  resolve("success");
});

p.then(function(value){
  console.log(value);
});

console.log("which one is called first ?");
输出
"which one is called first ?"
"success"

Promise接收的函数参数是同步执行的,但then方法中的回调函数执行则是异步的,因此,"success"会在后面输出。

##3.Promise 三种状态(resolve,reject,pendding)

let p1 = new Promise(function(resolve,reject){
  resolve(1);
});
let p2 = new Promise(function(resolve,reject){
  setTimeout(function(){
    resolve(2);  
  }, 500);      
});
let p3 = new Promise(function(resolve,reject){
  setTimeout(function(){
    reject(3);  
  }, 500);      
});

console.log(p1);
console.log(p2);
console.log(p3);
setTimeout(function(){
  console.log(p2);
}, 1000);
setTimeout(function(){
  console.log(p3);
}, 1000);

p1.then(function(value){
  console.log(value);
});
p2.then(function(value){
  console.log(value);
});
p3.catch(function(err){
  console.log(err);
});

输出
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 1}
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}//console执行的时候还没有resolve(2) 所以状态是pending
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}//同上
1
2
3
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 2}//延迟一秒是最后 0.5秒已经过去已经拿到resolve(2)的执行结果 
Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: 3} 同上

Promise有三种状态:pending,resolved,rejected。当Promise刚创建完成时,处于pending状态;返回结果是resolved或者rejected ,因为p1 的函数中执行的是一段同步代码 所以Promise {[[PromiseStatus]]: “resolved”, [[PromiseValue]]: 1}

##4.Promise 状态的不可逆性

let p1 = new Promise(function(resolve, reject){
  resolve("p1 success1");
  resolve("p1 success2");
});

let p2 = new Promise(function(resolve, reject){
  resolve("p2 success");
  reject("p2  reject");
});

p1.then(function(value){
  console.log(value);
});

p2.then(function(value){
  console.log(value);
});
输出
"p1 success1"
"p2 success"

Promise状态的一旦变成resolved或rejected时,Promise的状态和值就不会再次改变了,不论你后续再怎么调用resolve或reject方法,都不能改变它的状态和值。因此,p1中resolve(“p1 success2”)并不能将p1的值更改为p1 success2,p2中reject(“p2 reject”)也不能将p2的状态由resolved改变为rejected.
和return 可以一样理解 如果resolved或者rejected 后面的代码就不执行了。

##5.链式调用

let p = new Promise(function(resolve, reject){
  resolve(1);
});
p.then(function(value){               //第一个then
  console.log(value);
  return value*2;
}).then(function(value){              //第二个then
  console.log(value);
}).then(function(value){              //第三个then
  console.log(value);
  return Promise.resolve('resolve'); 
}).then(function(value){              //第四个then
  console.log(value);
  throw('reject')
  //return Promise.reject('reject');
}).then(function(value){              //第五个then
  console.log('resolve: '+ value);
}, function(err){
  console.log('reject: ' + err);
})
输出
1
2
undefined //return 返回值问题 没有返回值默认undefined 
"resolve"
"reject: reject"

Promise返回值问题

  1. Promise对象的then方法可以返回一个常数 例如 //第一个then
  2. Promise对象的then方法可以返回一个新的Promise对象 例如 //第三个then
  3. Promise对象的then方法没有返回值 下个接收到的值是undefined //第二个then
  4. 也可以扔出一个异常throw,then方法将返回一个rejected状态的Promise, 值是该异常。
    ##6.Promise 中的异常和 多级then的回调函数
let p1 = new Promise( function(resolve,reject){
  haha();
  resolve( 1 );	  
});

p1.then(
  function(value){
    console.log('p1 then value: ' + value);
    return 'p1 1';
  },
  function(err){
    console.log('p1 then err: ' + err);
  }
).then(
  function(value){
    console.log('p1 then then value: '+value);
  },
  function(err){
    console.log('p1 then then err: ' + err);
  }
);

var p2 = new Promise(function(resolve,reject){
  resolve( 2 );	
});

p2.then(
  function(value){
    console.log('p2 then value: ' + value);
    haha();
  }, 
  function(err){
    console.log('p2 then err: ' + err);
  }
).then(
  function(value){
    console.log('p2 then then value: ' + value);
  },
  function(err){
    console.log('p2 then then err: ' + err);
    return 'p2 1';
  }
).then(
  function(value){
    console.log('p2 then then then value: ' + value);
  },
  function(err){
    console.log('p2 then then then err: ' + err);
  }
);
输出
p1 then err: ReferenceError: haha is not defined
p2 then value: 2
p1 then then value: undefined
p2 then then err: ReferenceError: haha is not defined
p2 then then then value: p2 1

Promise中的异常由then参数中第二个回调函数(Promise执行失败的回调)处理,异常信息将作为Promise的值.
需要注意p1、p2多级then的回调函数是交替执行的,这正是由Promisethen回调的异步性决定的!\color{blue}{需要注意p1、p2 多级then的回调函数是交替执行的 ,这正是由Promise then回调的异步性决定的!}需要注意p1、p2多级then的回调函数是交替执行的,这正是由Promisethen回调的异步性决定的!

##7.Promise.resolve() 返回promise是异步的

let p1 = Promise.resolve( 1 );
let p2 = Promise.resolve( p1 );
let p3 = new Promise(function(resolve, reject){
  resolve(1);
});
var p4 = new Promise(function(resolve, reject){
  resolve(p1);
});

console.log(p1 === p2); 
console.log(p1 === p3);
console.log(p1 === p4);
console.log(p3 === p4);

p4.then(function(value){
  console.log('p4=' + value);
});

p2.then(function(value){
  console.log('p2=' + value);
})

p1.then(function(value){
  console.log('p1=' + value);
})
输出
true
false
false
false
p2=1
p1=1
p4=1

Promise.resolve(…)可以接收一个普通值值或者是一个Promise对象作为参数。当参数是普通值时,它返回一个resolved状态的Promise对象,对象的值就是这个参数;当参数是一个Promise对象时,它直接返回这个Promise参数。因此,p1 === p2。但通过new的方式创建的Promise对象都是一个新的对象,因此后面的三个比较结果都是false。
为什么p4的then最先调用,但在控制台上是最后输出结果的呢?因为p4的resolve中接收的参数是一个Promise对象p1,获取p1的状态和值,但这个过程是异步的(不懂可以看下一个例子),

##8.定时器和promise

let p1 = new Promise(function(resolve, reject){
	console.log('p1');
  	resolve(1);
});

setTimeout(function(){
	console.log('setTimeout');
},0)

p1.then(function(value){
	console.log(value);
})
输出
p1
1
setTimeout

为什么then会优先于定时器先执行是因为等待队列(或者说是任务队列)其实是分为两个: macrotask 和 microtask;promise是存放在microtasks中,而定时器是存放在macrotasks中,但是在每次"事件循环"后会先执行microtask中的内容,并且当这些 microtask 执行结束后还能继续添加 microtask 一直到真个 microtask 队列执行结束,直到当前microtask执行结束之后,才会执行macrotask中的任务,并且往下进行"事件循环"所以才会出现如上代码输出的结果。

如果想详细了解事件队列可以看下 知乎的https://www.zhihu.com/question/36972010 比较详细的解释了为什么会这样 还有V8的源码

promise核心总结 阅读详情

相关推荐

传感器模块的电路艺术:从引脚定义到系统集成的设计哲学

本文深入探讨传感器模块的电路设计艺术,从引脚定义到系统集成的完整设计哲学。重点解析电源管理、信号处理及I2C通信协议等核心电路原理,分享多模块协同中的电源架构、信号完整性和接地策略,为硬件工程师提供实用的系统级设计思维与实战案例。

o1p2q3r的博客 224

Promise

从功能上来说Promise对象用来封装一个异步操作并可以获取成功失败的结果值。返回一个新的promises,只有所有成功才成功,只要有一个失败则都失败。返回一个新的promises,最终结果是第一个promise执行的结果。Promise是JS中进行异步编程的新解决方案,旧方案是使用回调函数。返回一个padding状态的promise对象。Promise是一门新的技术(ES6规范): 初始状态,既不是成功,也不是失败状态。then 返回一个新的promise。包含n个promise的数组,

qq_38367703的博客 6827

基于Python的微信聊天记录分析——数据获取

本篇为“基于Python的微信聊天记录分析”第一篇,主要涉及数据获取,包括Python环境配置、WeChatMsg项目配置和运行、获取聊天记录等内容,流程简单、比较基础,后续这个系列会涉及基于Python的数据处理、统计分析、NLP技术等内容。希望和大家多多交流,共同进步!

Henryli1202的博客 1万+

promise基础

/传入一个函数作为回调函数 在对应代码执行完成调用 function fn1(fn) {//走完了以后回调函数执行 fn() } , 1000) } fn1(() => {}) //多个回调函数嵌套 回调地狱 (回调函数的无限嵌套 代码的可读性 可维护性 已经失去了) fn(() => {// 如果没有放行,后面的代码不会执行 setTimeout(() => {} // async修饰函数执行会返回一个promise对象 console . log(fn());

qq_59721336的博客 1688

开源CC6920差分霍尔电流传感器模块实战指南——从选型到波形分析

本文详细介绍了CC6920差分霍尔电流传感器模块的选型、硬件连接、参数计算及波形分析技巧。通过实战案例,展示了该开源硬件在电流测量中的优势,包括超低内阻、电气隔离和抗干扰能力,适用于电机控制、开关电源保护等场景。

weixin_28738397的博客 378

游戏开发实战:用UE4 Marschner模型打造次世代头发渲染(附Shader代码解析)

本文详细解析了如何在UE4中使用Marschner模型实现次世代头发渲染,包括Shader代码逐行解读与参数调优。通过对比传统Kajiya-Kay模型,展示了Marschner模型在物理精确性和视觉效果上的优势,并提供了性能优化与实战技巧,帮助技术美术师提升游戏角色渲染品质。

weixin_28223453的博客 240

【接口问题】请求成功但业务失败,返回500

一个简单的接口练习,检查了各种问题还是一直返回500 T T

weixin_51722468的博客 3184

Simulink+Simscape多体仿真:六自由度Stewart平台动力学建模全流程

本文详细介绍了使用Simulink和Simscape Multibody进行六自由度Stewart平台动力学建模的全流程,涵盖从CAD模型导入、运动学逆解计算到实时控制系统的设计。通过MATLAB/Simulink与Simscape的协同工作,实现高保真度的并联机器人仿真,适用于飞行模拟器、精密加工等高精度领域。

r2s3t4的博客 489

Promise详解-2:Promise的进阶使用

不懂Promise的进阶?这篇文章直接教会你

sharkchen的专栏 1428

SA8295P QNX主机上电启动流程分析

嵌入式系统的启动过程对于确保系统正常运行至关重要。本文将详细分析SA8295P芯片在QNX主机上的上电启动流程,并提供相应的源代码示例。嵌入式系统的启动过程对于确保系统正常运行至关重要。本文将详细分析SA8295P芯片在QNX主机上的上电启动流程,并提供相应的源代码示例。以下是一个SA8295P QNX主机上电启动流程分析。

CodeMaven的博客 1233

YOLOv11改进 | 损失函数改进篇 | EIoU、SIoU、WIoU、DIoU、FocusIoU等二十余种损失函数

这篇文章介绍了YOLOv11的重大改进,特别是在损失函数方面的创新。它不仅包括了多种IoU损失函数的改进和变体,如SIoU、WIoU、GIoU、DIoU、EIOU、CIoU,还融合了“Focus”思想,创造了一系列新的损失函数。这些组合形式的损失函数超过了二十余种,每种都针对特定的目标检测挑战进行优化。文章会详细探讨这些损失函数如何提高YOLOv11在各种检测任务中的性能,包括提升精度、加快收敛速度和增强模型对复杂场景的适应性。

Snu77的博客 6197

Promise详解大全

Promise它的是执行的,then 方法是执行的,所以Promise创建后里面的函数会立即执行,构造函数中的resolve和reject只有第一次执行有效,,也就是说。

zhoupenglkh的博客 1329

MATLAB与ROS联合仿真——实例程序搭建思路

MATLAB与ROS联合仿真——实例程序搭建思路

慕羽★的博客 5229

详解Promise用法

Promise 是 JavaScript 中用于处理异步操作的一种重要机制。Promise 用于解决 JavaScript 中异步操作的复杂性,通过状态管理、链式调用、错误处理等功能,实现代码的清晰、有序与可维护,避免回调地狱,提升异步编程的效率与体验。

qq_52869537的博客 1270

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

Promise详解

前言: 日常开发中,异步操作几乎每天都能见到。传统的意不解决方案是通过回调函数,随着程序逻辑越来越复杂,回调函数的方式变得越来越繁琐,很容易出现回调地狱,于是一种更合理更强大的代替方案出现–Promise,接下来就深入学习Promise是如何解决异步操作的。 一.基础 定义: Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值. const promise1 = new Promise((resolve, reject) => { setTimeout(() =&gt

weixin_49759035的博客 9995

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

Promise 详解

什么是 Promise、Promise 的状态、Pending、Fulfilled、Rejected、Promise的resolve()函数、Promise的reject()函数、Promise的then()函数、Promise的catch()函数、Promise.all、Promise.allSettled、Promise.any、Promise.race

原名又逢乱世。不要放下学习的脚步,毕竟比天天打牌、钓鱼、打游戏更能从内在充实自己。 1135

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

【JavaScript】Promise 的三种状态详解

Promise是 JavaScript 中用于处理异步操作的对象。通过使用 Promise,开发者可以避免深层嵌套的回调函数(俗称“回调地狱”),从而提高代码的可读性和可维护性。一个PromisePending(进行中):初始状态,表示异步操作尚未完成,处于等待状态。Fulfilled(已完成):表示异步操作成功完成,并返回结果。Rejected(已拒绝):表示异步操作失败,并返回错误原因。Promise 提供了一种简洁有效的方式来处理 JavaScript 中的异步操作,它的三种状态(

lph159的博客 2859

详解Promise——Promise的方法有哪些

是 JavaScript 中用于处理异步操作的对象,它提供了一系列方法来处理异步流程。

qq_74162234的博客 2568

【AJAX】Promise详解

本文介绍了JavaScript异步编程的核心概念和解决方法。主要内容包括:同步与异步的区别、回调函数地狱问题及其缺点、Promise链式调用的解决方案、async/await语法简化异步代码、try-catch错误处理机制。此外还讲解了事件循环模型、宏任务与微任务的执行顺序、Promise.all静态方法合并多个异步请求,并通过分类导航案例展示了实际应用。这些方法有效解决了回调嵌套问题,提高了代码可读性和执行效率。文章还提供了相关学习资源链接,适合前端开发者深入理解异步编程。

2301_80636070的博客 1096
上一篇: js 原型链详细解析完整版
下一篇: js Object.prototype.toString.call(value)
wen_binObject
博客等级 码龄10年 51粉丝 63原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值