皮皮网

1.【Flutter】利用Future封装出js中的Promise
2.Promise的用途及其三种状态
3.js问题：怎样极致快速的搞懂promise
4.30分钟简单实现一下postMessage的Promise业务场景
5.JS的Promise兄弟
6.js中如何使用promise.all方法?-栗子前端的回答

【Flutter】利用Future封装出js中的Promise

       å‰ç«¯çš„同学对 Promise 肯定都很熟悉，而 Future 便是 dart 中 Promise ，但方法名称和使用方式还是有些许的差异的。

        下面我们尝试，利用 Future 封装出js中我们熟悉的 Promise 。

       /#docs/promise

        使用示例

        Promise.all , Promise.race , Promise.resolve , Promise.reject

        Promise.allSettled 方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例。只有等到所有这些参数实例都返回结果，不管是 fulfilled 还是 rejected ，包装实例才会结束。该方法由 ES 引入

        Promise.any() 方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例。只要参数实例有一个变成 fulfilled 状态，包装实例就会变成 fulfilled 状态；如果所有参数实例都变成 rejected 状态，包装实例就会变成 rejected 状态。该方法目前是一个第三阶段的 提案 。

        Promise.any() 跟 Promise.race() 方法很像，只有一点不同，就是不会因为某个 Promise 变成 rejected 状态而结束。

        顺便把 延迟函数 也封装一下，毕竟毫秒延迟的使用频率是最高的。

Promise的用途及其三种状态

       Promise产生的背景

       JavaScript作为一种单线程事件循环模型语言，为了提升效率，引入了异步编程模式。异步编程允许在操作阻塞主线程执行时进行其他任务，从而缩短计算时间。早期，sx1276源码通过定义回调函数来处理异步操作，然而，随着代码复杂度增加，回调函数嵌套问题日益严重，导致代码难以维护，这种问题被称为"回调地狱"。

       为了解决回调地狱问题，ECMAScript 6引入了Promise这一引用类型。Promise通过new操作符实例化，用于抽象表示异步操作，提供更简洁、清晰的异步编程方式。

       Promise的状态分为三种：

       1. pending: 为初始状态，之后可转为fulfilled或rejected，状态不可修改。Promise状态不能被外部JS代码更改，以确保异步行为的封装和隔离。

       Promise的用途：

       1. 抽象地表示异步操作：Promise可用于表示异步操作的完成状态，如HTTP请求。请求成功返回-状态码时，Promise状态变为fulfilled；若状态码不在该范围内，则变为rejected。灯光控制app源码

       2. 实际生成值：Promise状态改变时，可访问生成的值。在fulfilled状态，Promise包含一个名为value的私有属性，存储原始值的引用；在rejected状态，包含一个名为reason的私有属性，存储拒绝原因的引用。value和reason默认为undefined，可选且不可修改。

       通过执行函数控制Promise状态：

       Promise状态是私有的，仅在内部操作。执行器函数负责控制状态转换，并通过resolve()和reject()两个参数实现。调用resolve()将状态转为fulfilled，调用reject()将状态转为rejected。

       即使在初始化时状态转换，执行器函数也是同步执行的。这是因为执行器函数是Promise初始化程序。状态转换一旦发生，不可撤销，后续尝试修改状态默认失败。

       为避免Promise处于pending状态过长，可通过setTimeout设置超时机制，如在秒后自动拒绝Promise。超时机制确保Promise在规定时间内完成状态转换，避免无限等待。

       Promise的安装补丁源码失败状态改变只发生一次，因此，超时拒绝逻辑中的pending设置不会影响状态转换。如果执行器中的代码在超时之前已经解决或拒绝，尝试再次拒绝将默认失败。

js问题：怎样极致快速的搞懂promise

       在JavaScript编程中，Promise是一种特殊的对象，它封装了一个异步操作的状态，这个状态可能为成功或失败，并且提供了一种通过回调函数来获取结果的方式。在学习Promise时，理解它的作用及其由来对于优化代码结构、提高代码可读性和维护性至关重要。下面将从解决异步问题的发展阶段出发，逐步解析Promise的作用。

       在处理异步操作时，最原始的方法是使用回调函数。然而，随着异步操作的复杂度增加，回调地狱问题变得日益严重，代码变得难以理解和维护。为了解决这个问题，人们开始探索更加优雅的解决方案。

       发展阶段一：回调函数

       在最初的异步操作中，我们使用回调函数进行处理。这种方式虽然直观，但当多个操作相互依赖时，回调函数的像素鸟java源码嵌套会形成一个复杂的调用链，这就是所谓的“回调地狱”。

       发展阶段二：封装回调函数

       为了解决回调地狱问题，开发者开始将每个异步操作封装成一个函数，返回结果。这样虽然代码结构更加清晰，但仍然无法避免回调函数的嵌套，问题并未得到根本解决。

       发展阶段三：Promise与then方法

       Promise的出现旨在解决回调地狱问题。Promise是一个构造函数，实例化后可以进行resolve或reject操作。通过then方法可以指定在Promise成功或失败时执行的回调函数。然而，这种设计虽然减少了嵌套的回调函数，但在链式调用时仍存在冗余，对可读性有所影响。

       发展阶段四：Promise与async/await

       为了解决Promise的链式调用问题，async/await成为了更佳的解决方案。async函数会自动处理Promise对象，await关键字则允许在等待Promise完成时暂停函数执行。这种语法更加直观，易于理解和维护，成为处理异步操作的首选。

       在实际开发中，Promise及其高级特性，如async/await，是处理异步操作的关键工具。了解其作用和应用方法，扒别人网站源码能够显著提升代码的质量和可维护性。同步与异步的区别在于执行顺序和等待结果的策略，同步操作在执行完一个任务后等待结果，而异步操作则允许在等待结果的同时执行其他任务。

       学习和掌握Promise及其相关技术对于JavaScript开发者来说是至关重要的。通过不断实践和深入理解，能够更好地应对异步编程的挑战，编写出更加高效、清晰和易于维护的代码。

分钟简单实现一下postMessage的Promise业务场景

       背景

       项目中接入三维模型，由于三维模型团队只提供iframe方式接入和postMessage通讯方式和通讯的数据格式。

//api调用的接口//params传递参数{ require:{ api:Strubg,params:*}}刚开始的样子<divclass="model"><iframesrc="xxx"ref="iframe"/></div>created(){ this.initEvent()},methods:{ initEvent(){ window.addEventListener('message',this.handleReceive,false)this.$once('hook:beforeDestroy',()=>{ window.removeEventListener('message',this.handleReceive,false)})},//接收事件handleReceive(e){ console.log(e)//e.data就是接收的数据},//发送事件postMessage({ api,params}){ constmergeParams={ require:{ api,params}}this.$refs.iframe.contentWindow.postMessage(mergeParams,'*')}}//使用的时候this.postMessage({ api:'setData'})

       简单实现一下，但是发现不能直接拿到调用接口的返回值，只能通过handleReceive接收值，并回调，这样子很麻烦。

promise改造思路整理

       需要跟三维模型团队约定uuid。

//queue.js/***异步队列*@paramtime-超时时间，单位秒*/exportdefaultclassQueuePromise{ constructor(time=){ this.queue=newMap()this.time=time}//加入队列push(uuid,resolve,reject){ constparams={ uuid,resolve,reject}params.timer=setTimeout(()=>{ this.put(uuid)reject({ code:-1,msg:'超时'})},this.time*)this.queue.set(uuid,params)}//执行队列，并出栈perform(uuid,params){ constapiQueue=this.put(uuid)//这里执行resolve，并把结果返回回去apiQueue.resolve(params)}//找到并出栈put(uuid){ constapiQueue=this.queue.get(uuid)if(!apiQueue)returnthis.queue.delete(uuid)apiQueue.timer&&clearTimeout(apiQueue.timer)returnapiQueue}clear(){ this.queue.forEach(e=>{ e.timer&&clearTimeout(e.timer)})this.queue=null}}+importQueuefrom'./queue'created(){ this.initEvent()},methods:{ initEvent(){ +this.queue=newQueue()window.addEventListener('message',this.handleReceive,false)this.$once('hook:beforeDestroy',()=>{ window.removeEventListener('message',this.handleReceive,false)+this.queue&&this.queue.clear()})},//接收事件handleReceive(e){ console.log(e)//e.data就是接收的数据+const{ api,params,uuid}=e.data?.require||{ }+if(uuid)returnthis.queue.perform(uuid,params)//如果有uuid，则去执行resolve或者reject//正常处理你的业务},//发送事件postMessage({ api,params}){ +returnnewPromise((resolve,reject)=>{ constmergeParams={ require:{ api,params}}+this.$refs.iframe.contentWindow.postMessage(mergeParams,'*')+this.queue.push(objRequest.require.uuid,resolve,reject)+})}}//使用的时候this.postMessage({ api:'setData'}).then(e=>{ //拿到返回值console.log(e)})//或者constres=awaitthis.postMessage({ api:'setData'})

       以上就是postMessage的Promise化全过程。

JS的Promise兄弟

        　　相信用过JS的都知道JS是单线程的，同步的函数先执行，异步的函数先加入到一个队列中等同步执行完了再执行异步函数。基于这个JS采用异步回调的方式来处理需要等待的事件，是的代码会继续执行而不用在异步处理的地方一直等待着。同时也带来一个不好的方面，如果我们有很多的回调函数， 也就是说一个回调函数里边再嵌套一个回调一层一层的嵌套，这样就很容易进入传说中的回调地狱。

        　　 注意：异步和回调不是一个东西

        　　下面感受一下回调地狱代码的魅力：

        　　是挺有美感的但是阅读性很差，写法也让人感到无力，es6新出的promise对象已经es7的async await都可以解决这个问题，但是今天的主角是Promise。

        　　Promise是异步编程的一种解决方案，可以替代传统的解决方案--回调函数和事件。ES6统一了用法，并原生提供了Promise对象。作为对象，Promise有一下两个特点：（1）对象的状态不受外界影响；（2）一旦状态改变了就不会在变，也就是说任何时候Promise都只有一种状态。Promise有三种状态，分别是：Pending（进行中），Resolved(完成)，Rejected (失败)。Promise从Pending状态开始，如果成功就转到成功态，并执行resolve回调函数；如果失败就转到失败状态并执行reject回调函数。

        　　Promise一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

        　　Promise构造函数接收一个函数作为参数，该函数的两个参数是resolve，reject，它们由JavaScript引擎提供。其中resolve函数的作用是当Promise对象转移到成功,调用resolve并将操作结果作为其参数传递出去；reject函数的作用是单Promise对象的状态变为失败时，将操作报出的错误作为其参数传递出去

        　　介绍一下Promise的api怎么使用：

        　　 1、Promise.resolve()的作用将现有对象转为Promise对象resolved;Promise.resolve('test')==new Promise(resolve=>resolve('test'))

        　　2、Promise.reject()返回一个Promise对象,状态为rejected

        　　3、Promise.prototype.then()方法接受两个参数，第一个是成功的resolved的回调，另一个是失败rejected的回调，第二个失败的回调参数可选。并且then方法里也可以返回promise对象，这样就可以链式调用了。

        　　 4、Promise.prototype.catch()发生错误的回调函数。

        　　 5、Promise.all() // 所有的事都有完成，相当于 且，适合用于所有的结果都完成了才去执行then（）成功的操作。

        　　 6、Promise.race() // 完成一个任务即可，相当于 或。(这个经常用在一些图片比较多的网站)

js中如何使用promise.all方法?-栗子前端的回答

       Promise 是JavaScript中用于处理异步操作的核心工具，常用于实现非阻塞性的代码执行流程。

       Promise的状态有三种：pending（进行中）、fulfilled（成功）、rejected（失败）。ECMAScript规范对Promise的定义和操作方法进行了不断优化和扩展，现在已包含了7个静态方法。

       Promise.all方法用于处理一组并发的Promise，它接受一个Promise数组作为参数，并返回一个新的Promise实例。当数组中所有Promise都完成（无论成功或失败）时，返回的Promise状态变为fulfilled，并返回一个包含所有Promise结果的数组。

       Promise.allSettled方法则对Promise.all进行了扩展，当所有Promise都完成（成功或失败）时，它同样返回一个Promise实例，但返回的是一个对象数组，每个对象包含了Promise的执行结果和最终状态。

       Promise.allSettled和Promise.all的主要区别在于，Promise.allSettled会处理所有Promise，无论成功或失败，而Promise.all只处理成功完成的Promise。

       Promise.any方法用于寻找数组中第一个完成的Promise。当数组中的任何一个Promise完成时，Promise.any返回该Promise的结果。

       Promise.any与Promise.all相比，更侧重于快速响应第一个完成的任务，而Promise.all则关注所有任务的完成。

       Promise.race方法用于等待数组中的任意一个Promise完成，并返回该Promise的结果。一旦有Promise完成（无论是成功还是失败），Promise.race返回的Promise就会改变状态，并返回结果。

       Promise.race与Promise.any相似，但Promise.race更关注最快完成的任务，而Promise.any则关注任何完成的任务。

       为了实现并发请求，可以结合使用Promise.race和Promise.all。当并发请求的数量超过某个阈值时，可以使用Promise.all等待所有请求完成，同时使用Promise.race控制并发数量，确保不会同时发起超过阈值的请求。

       Promise.resolve用于创建一个状态为fulfilled的Promise实例，而Promise.reject用于创建一个状态为rejected的Promise实例。

       为了将回调式异步编程转换为Promise，可以使用Promise.withResolvers方法简化代码。

       通过了解和掌握Promise的多种静态方法，开发者可以更优雅地处理异步操作，优化代码结构，提升代码的可读性和可维护性。

浅谈js promise看这篇足够了

       结论：这篇文章深入剖析了JavaScript中的Promise对象，如何解决回调地狱的问题，以及如何通过Promise使异步操作更加优雅。继续阅读，你将对Promise有全面的理解。

       JavaScript中的异步处理机制，特别是Node.js，得益于其异步回调机制，使代码执行效率提升。然而，过多的嵌套回调可能导致代码难以理解和维护，这就是所谓的"回调监狱"。为了解决这个问题，ES6引入了Promise，以及ES7的async/await，本文将重点讲解Promise。

       Promise是一个特殊对象，用于处理异步操作，它的存在使得编写异步代码更为简洁，易于理解和跟踪。Promise有三种状态：pending（进行中）、resolved（成功）和rejected（失败），确保无论异步操作结果如何，都会给出明确的响应。Promise的then方法是核心，它接受两个回调函数，分别处理成功和失败的情况，且支持链式调用。

       文章中给出了一个使用Promise的实例，展示了如何通过链式调用then方法来处理异步操作的结果。此外，还介绍了Promise的一些常用API，如Promise.resolve()和Promise.reject()用于创建已成功或失败的Promise，Promise.all()和Promise.race()则用于处理多个Promise的并发和并行情况。

       通过深入理解Promise，我们可以更好地组织异步代码，避免回调地狱，提高代码的可读性和可维护性。希望这篇文章能帮助你全面掌握Promise的使用，让你的JavaScript开发更加高效。

为什么javascript中promise里的代码能立即执行,settime

       在JavaScript中，当一个Promise实例创建后，其内部会立即执行f1函数。这个执行过程并不会阻塞后续代码的执行，而是异步进行。因此，当f1函数执行完毕并返回一个Promise对象时，Promise实例即已准备好。

       接着，通过.then方法，我们关联了f2函数。此时，f2函数并不会立即执行，而是在Promise实例变为'fulfilled'状态（即f1函数返回的结果满足某种条件）时执行。然而，在.then方法调用时，由于f1已经执行完毕，Promise实例处于'fulfilled'状态，因此f2函数会立即执行。

       这个特性让开发者能够以链式方式编写异步代码，使得代码逻辑清晰、易于理解。此外，通过.then方法的立即执行，也使得代码能够有效利用并行执行和并发处理，提高程序性能。

       将f2与setTimeout(f3)中的f3进行比较，可以发现尽管setTimeout用于将函数延时执行，但它并不会立即执行。相反，当setTimeout函数被调用时，它会在指定延迟后执行f3函数。因此，setTimeout中的代码不会立即执行，而是在指定时间后才会执行。

       综上所述，Promise中代码能立即执行的关键在于其异步执行机制和.then方法的特性。而setTimeout的代码则会延迟执行，这与Promise中的执行机制存在本质区别。因此，了解这些异步执行的细节对于编写高效、可维护的JavaScript代码至关重要。