深圳求职网站哪个好wordpress 蛋花儿收费主题

深圳求职网站哪个好,wordpress 蛋花儿收费主题,望野博物馆阎焰简历,泰安焦点网络有限公司前言 Promise一直是前端面试中的热点#xff0c;下面给大家介绍下Promise的相关方法。 1. Promise.all 1.1 介绍 调用Promise.all时需要传入一个promise数组#xff0c;我们称它为promiseArr#xff0c;然后Promise.all会返回一个新的Promise#xff0c;我们把它称为p下面给大家介绍下Promise的相关方法。1. Promise.all1.1 介绍调用Promise.all时需要传入一个promise数组我们称它为promiseArr然后Promise.all会返回一个新的Promise我们把它称为p如果promiseArr中有一个Promise失败则走入p的catch回调中并拿到对应的错误对象。如果promiseArr里面全成功则会走入p的then方法中并能拿到之前传入的promiseArr对应的promise结果。1.2 原理functionpromiseAll(promiseArray){returnnewPromise((resolve,reject){if(!Array.isArray(promiseArray)){returnreject(newError(传入的参数必须是数组))}constpromiseNumpromiseArray.lengthconstresultsnewArray(promiseNum)letcount0promiseArray.forEach((promise,index){Promise.resolve(promise).then(res{results[index]resif(countpromiseNum){resolve(results)}}).catch(reject)})})}注意点需要默认返回一个promise存结果的results数组需要通过index和传入的promise数组一一对应1.3 应用场景并行发送多个请求。多个文件的并行读取。并行执行多个任务。2. Promise.race2.1 介绍race的意思是赛跑哪个Promise跑的快也就是哪个Promise最先成功或失败整个Promise.race也就对应的成功或失败。2.2 原理functionPromiseRace(promiseArray){returnnewPromise((resolve,reject){if(!Array.isArray(promiseArray)){returnreject(newError(传入的参数必须是数组))}promiseArray.forEach((promise,index){Promise.resolve(promise).then(res{resolve(res)}).catch(reject)})})}2.3 应用场景尽快拿到请求结果比如多个接口都可以拿到你想请求的数据你就可以用Promise.race如果拿到了一个请求的响应结果你就可以直接渲染页面了这样能加快我们的页面响应速度。多个资源加载你可以把手动去加载多个资源然后用Promise.race来等待最快加载的资源后采取行动以提高加载性能。竞态条件处理同时尝试多个可能的解决方案并采取第一个可用的解决方案。3. Promise.prototype.finally3.1 介绍finally和then、catch一样都是Promise原型上的方法与then、reject一同不管Promise成功还是失败最终都会执行finally方法。3.2 原理Promise.prototype.finallyfunction(cb){returnthis.then((y){returnPromise.resolve(cb()).then(()y);},(r){returnPromise.resolve(cb()).then((){throwr;});});};3.3 应用场景清理资源或状态比如你需要在最Promise执行结束之后释放一些资源比如打开的文件、数据库连接或网络连接等或者释放状态比如页面的loading等执行收尾操作比如无论Promise成功或者失败你都要执行一些收尾工作比如记录日志、发送统计信息或触发一些事件等。统一处理在then和catch的时候都需要进行的处理这时候你就不需要写两次重复的代码了直接放在finally当中。4. Promise.allSettled4.1 介绍Promise.allSettled()方法接收一组Promise作为参数返回一个新的Promise实例只有等到所有的这些参数实例都返回结果不管是fulfilled还是rejected包装实例才会结束返回新的Promise实例一旦结束状态总是fulfilled不会变成rejected新的promise实例给监听函数传递一个数组results。该数组的每个成员都是一个对象对应传入Promise.allSettled的Promise实例。每个对象都有status属性对应着fulfilled和rejected。fulfilled时对象有value属性rejected时有reason属性对应两种状态的返回值。当我们不需要关心异步操作的结果只会关心这些操作有没有结束的时候这时候Promise.allSettled就派上用场了。4.2 原理constformatSettledResult(isSuccess,value){returnisSuccess?({status:fulfilled,value}):({status:rejected,reason:value})}Promise.all_settledfunction(promises){if(!Array.isArray(promises)){thrownewError(传入的参数必须是数组y)}letnum0,lenpromises.length,resultsArray(len)returnnewPromise((resolve,reject){promises.forEach((promise,index){Promise.resolve(promise).then((value){results[index]formatSettledResult(true,value)if(numlen){resolve(results)}}).catch((reason){results[index]formatSettledResult(false,reason)if(numlen){resolve(results)}})})})}4.3 应用场景并行请求当我们需要并行发送多个请求并在所有请求完成后获得每个请求的结果和状态信息批量处理在等待所有的请求完成后对各个请求的状态分别进行处理。处理多个资源加载可以将资源的加载封装为promise并同时加载多个资源并在加载完后根据promise的状态对每个资源进行对应的处理。5. Promise.cache5.1 介绍利用promise实例化立即执行的特性可以做请求的缓存。5.2 原理constcacheMapnewMap()functionenableCache(target,name,descriptor){constvaldescriptor.value descriptor.valueasyncfunction(...args){constcacheKeynameJSON.stringify(args)if(!cacheMap.get(cacheKey)){constcacheValuePromise.resolve(val.apply(this,args)).catch((){cacheMap.set(cacheKey,null)})cacheMap.set(cacheKey,cacheValue)}returncacheMap.get(cacheKey)}returndescriptor}classPromiseClass{// 装饰器// enableCachestaticasyncgetInfo(){}}PromiseClass.getInfo()PromiseClass.getInfo()PromiseClass.getInfo()这里我先定义一个Map作为缓存对象然后用方法名也就是上面的getInfo参数序列化后的值作为缓存key值然后就可以实现请求的缓存了当然我这里缓存key设置的比较简单实际业务场景肯定会更为严谨一些然后业务中如果用了缓存的话需要考虑缓存失效的问题过快失效和过久不失效都可能会让程序出现bug需要注意一下。5.3 应用场景缓存接口请求结果避免重复请求。也可以用来缓存复杂函数计算结果提高性能。6. Promise.limit6.1 介绍Promise.limit可以通过promise实现并发控制。6.2 原理functionlimitLoad(promiseArray,limit){constresults[];constpromisespromiseArray.slice(0,limit).map((promise,index){returnpromise.then((value){results[index]value;returnindex;})})letpPromise.race(promises)for(letilimit;ipromiseArray.length;i){pp.then((index){promises[index]promiseArray[i].then((value){results[i]value;returnvalue})returnPromise.race(promises)})}returnp.then(()results);}首先声明一个results数组存储promise结果然后先取出limit个数的promise通过Promise.race可以拿到最快执行完的那一个我们前面会把每个promise对应在promises数组的位置index往下传递然后通过循环串成一个promise链在Promise.race的then方法中通过前面的index找到那个最快执行完的promise所在的位置将其替换最终promise链执行完将存储promise结果的results数组返回就行了。6.3 应用场景并发请求控制有时候为避免服务器性能问题可以使用Promise.limit进行并发控制以提高请求的响应速度批量处理限制当对大量数据进行处理时有时候一次性处理会导致服务器内存溢出这时可以采用Promise.limit控制同时处理的数据数量以提高资源的处理效率。队列调度在任务调度和队列管理中可以使用Promise.limit将所有任务放在固定大小的任务池中并限制同时执行的任务数量这样可以确保任务按照限制的并发度进行顺序执行避免资源竞争和过度负载。7. Promise.try7.1 介绍Promise.try可以把一个函数包装为一个 Promise。functiontest(a,b){console.log(调用test,a,b)returntest res;}Promise.try(test,a,b).then((res){console.log(then,res)}).catch((){console.log(catch);})/** * 打印结果 * 调用test a b * then test res */它也支持传入异步函数比如async函数。constpnewPromise((resolve,reject){setTimeout((){resolve(111);},3000)})asyncfunctiontest(a,b){awaitp;console.log(test,a,b)returntest res;}Promise.try(test,a,b).then((res){console.log(then,res)}).catch((){console.log(catch);})/** * 先等待3s然后打印结果如下 * 调用test a b * then test res */7.2 原理Promise.tryfunction(fn,...args){returnnewPromise((resolve,reject){try{resolve(fn(...args))}catch(e){reject(e)}})}Promise.try的函数签名为Promise.try(func, arg1, arg2, ...argN)它会把arg1, arg2, ...argN作为参数传递给func, 并以同步的方式立即执行func函数最后将其结果包装为一个Promise对象。7.3 应用场景它可以把一个函数包装为一个Promise对象比new Promise((resolve) resolve(func()))更加简洁。8. Promise.withResolvers8.1 介绍Promise.withResolvers函数经调用会返回一个新的Promise以及resolve和reject方法。const{promise,resolve,reject}Promise.withResolvers()8.2 原理Promise.withResolversfunction(){letresolve,reject;constpromisenewPromise((res,rej){resolveres;rejectrej;});return{promise,resolve,reject};}8.3 应用场景可以替代new Promise创建Promise对象使得promise、resolve和reject三个变量在同一个作用域中方便管理。小结以上给大家介绍了8个 Promise 相关方法以及各自应用场景其中需要注意Promise.try和Promise.withResolvers属于比较新的API使用时需注意其兼容性。如果还有兴趣想掌握手写Promise的话可以移步我之前写的文章前端高频面试题之手写Promise。