蓝色商务网站模板商务网站建设实训心得

蓝色商务网站模板,商务网站建设实训心得,安卓开发环境搭建,红杭州网站建设1、什么是 promise#xff1f; Promise 译为 “承诺”#xff0c;是 JavaScript 中用于处理异步操作的解决方案。它代表一个异步操作的最终完成#xff08;或失败#xff09;及其结果值。 2、Promise 的特点 特点一#xff1a;Promise 有三种状态。 pending#xff1…1、什么是 promisePromise译为 “承诺”是 JavaScript 中用于处理异步操作的解决方案。它代表一个异步操作的最终完成或失败及其结果值。2、Promise 的特点特点一Promise 有三种状态。pending等待态promise的初始状态fulfilled成功态promise调用resolve函数后即会从pending等待态变为fulfilled成功态。rejected失败态promise调用reject函数后即会从pending等待态变为rejected失败态特点二Promise 状态不可逆。promise的状态一旦发生变更便无法再更改。比如调用resolve从pending变为fulfilled,它的状态就永远是fulfilled了再调用reject也无法从fulfilled变成rejected。并且状态只能从pending变为fulfilled或rejected不能从fulfilled或rejected返回到pending这个也很好理解状态只能前进不能倒退。特点三支持链式调用。通过.then()、.catch()、.finally()等方法进行链式调用。3、Promise 手写流程先看用法constpnewPromise((resolve,reject){resolve(111);})p.then((value){console.log(value)},(error){console.log(error)})首先Promise肯定是一个类所以我们才可以new它然后Promise实例化的时候给它传入一个回调我们叫它executor方法Promise内部会立即调用这个executor方法并且会传入resolve和reject两个函数作为调用参数另外在Promise类的原型上应该提供一个then方法它里面可以传入两个回调分别为Promise成功的回调和Promise失败的回调。调用resolve后会走入成功的回调中调用reject后会走入失败的回调中。3.1 版本一搭建整体架子constPENDINGpendingconstFULFILLEDfulfilledconstREJECTEDrejectedclassPromise{constructor(executor){this.valueundefinedthis.reasonundefinedthis.statusPENDINGconstresolve(value){if(this.statusPENDING){this.valuevaluethis.statusFULFILLED}}constreject(reason){if(this.statusPENDING){this.reasonreasonthis.statusREJECTED}}executor(resolve,reject);}then(onFulfilled,onRejected){if(this.statusFULFILLED){onFulfilledonFulfilled(this.value)}if(this.statusREJECTED){onRejectedonRejected(this.reason)}}}module.exportsPromise;3.2 版本二支持异步的 resolve 或者 reject如果是异步调用 resolve 或者 reject 那么上面onFulfilled和onRejected将无法执行了。constpnewPromise((resolve,reject){setTimeout((){resolve(111);},1000)})p.then((value){console.log(value)},(error){console.log(error)})所以我们需用两个数组充当队列把then里边的回调存起来。classPromise{constructor(executor){// ...// 定义两个数组this.onResolvedCallbacks[];this.onRejectedCallbacks[];constresolve(value){if(this.statusPENDING){this.valuevaluethis.statusFULFILLEDthis.onResolvedCallbacks.forEach(fnfn())}}constreject(reason){if(this.statusPENDING){this.reasonreasonthis.statusREJECTEDthis.onRejectedCallbacks.forEach(fnfn())}}// 默认执行executor函数并传入resolve和reject函数executor(resolve,reject)}then(onFulfilled,onRejected){if(this.statusFULFILLED){onFulfilledonFulfilled(this.value)}if(this.statusREJECTED){onRejectedonRejected(this.reason)}if(this.statusPENDING){this.onResolvedCallbacks.push((){onFulfilled(this.value)})this.onRejectedCallbacks.push((){onRejected(this.reason)})}}}这里定义了两个数组onResolvedCallbacks和onRejectedCallbacks分别存储 then 里面成功的回调和失败的回调然后再调用resolve和reject时分别循环执行这两个数组里存储的回调函数。3.3 版本三支持 Promise 链式调用比如下面这段代码constpnewPromise((resolve,reject){setTimeout((){resolve(111)},1000)})p.then((value1){console.log(value1,value1)return222},(error1){console.log(error1,error1)}).then((value2){console.log(value2,value2)},(error2){console.log(error2,error2)})它的打印结果为这个是如何实现的呢这个其实也简单它内部调用then方法时返回了一个新的promise并让这个新的promise接管了它下一个then方法。注意这里不能返回this这样会导致多个then方法全部受同一个promise控制。classPromise{// ...then(onFulfilled,onRejected){constpromise2newPromise((resolve,reject){if(this.statusFULFILLED){// onFulfilled方法可能返回值或者promiseconstxonFulfilled(this.value)resolvePromise(promise2,x,resolve,reject)}if(this.statusREJECTED){// onRejected方法可能返回值或者promiseconstxonRejected(this.reason)resolvePromise(promise2,x,resolve,reject)}if(this.statusPENDING){this.onResolvedCallbacks.push((){constxonFulfilled(this.value)resolvePromise(promise2,x,resolve,reject)})this.onRejectedCallbacks.push((){constxonRejected(this.reason)resolvePromise(promise2,x,resolve,reject)})}})returnpromise2}}最核心的就是resolvePromise来看下它做了什么functionresolvePromise(promise2,x,resolve,reject){if(promise2x){returnreject(newTypeError(UnhandledPromiseRejectionWarning: TypeError: Chaining cycle detected for promise #Promise))}letcalled// 判断x的类型 x是对象或函数才有可能是一个promiseif(typeofxobjectx!null||typeofxfunction){try{constthenx.thenif(typeofthenfunction){// 只能认为它是一个promisethen.call(x,(y){if(called)returncalledtrueresolvePromise(promise2,y,resolve,reject)},(r){if(called)returncalledtruereject(r)})}else{resolve(x)}}catch(e){if(called)returncalledtruereject(e)}}else{resolve(x)}}首先先判断新返回的一个promisepromise2是不是等于x抛出错误UnhandledPromiseRejectionWarning: TypeError: Chaining cycle detected for promise #Promise这一步是防止内部的循环引用。声明一个变量called相当于加了一把锁让promise只能调用一次成功或者失败回调防止死循环。解析x如果它的类型是object并且不为null或者它是一个函数并且它有then方法我们认为这是一个promise递归解析then里面再次调用resolvePromise3.4 版本四模拟异步微任务因为promise在EventLoop里面是个微任务不过我们可以简单通过setTimeout模拟。然后我们再加上一些报错的捕获代码以及一些参数的兼容代码以及实现catch方法。classPromise{constructor(executor){// ...// 这里增加try catchtry{executor(resolve,reject)}catch(e){reject(e)}}then(onFulfilled,onRejected){// 这里兼容下 onFulfilled 和 onRejected 的传参onFulfilledtypeofonFulfilledfunction?onFulfilled:vv onRejectedtypeofonRejectedfunction?onRejected:err{throwerr}constpromise2newPromise((resolve,reject){if(this.statusFULFILLED){// 用 setTimeout 模拟异步setTimeout((){try{constxonFulfilled(this.value)resolvePromise(promise2,x,resolve,reject)}catch(e){reject(e)}},0)}if(this.statusREJECTED){// 用 setTimeout 模拟异步setTimeout((){try{constxonRejected(this.reason)resolvePromise(promise2,x,resolve,reject)}catch(e){reject(e)}},0)}if(this.statusPENDING){this.onResolvedCallbacks.push((){// 用 setTimeout 模拟异步setTimeout((){try{constxonFulfilled(this.value)resolvePromise(promise2,x,resolve,reject)}catch(e){reject(e)}},0)})this.onRejectedCallbacks.push((){// 用 setTimeout 模拟异步setTimeout((){try{constxonRejected(this.reason)resolvePromise(promise2,x,resolve,reject)}catch(e){reject(e)}},0)})}})returnpromise2}// catch函数实际上里面就是调用了then方法catch(errCallback){returnthis.then(null,errCallback)}}executor执行时增加try catch防止执行用户传入的函数直接就报错了这时我们应该直接rejectpromise。调用onFulfilled和onRejected时需要包裹setTimeout。catch函数实际上里面就是调用了then方法然后第一个参数传null。ok这样就写的差不多了。最后我们来测试下我们写的promise是否符合规范。4、测试 promise使其符合 Promises/A 规范promise是有规范的即Promises/A我们可以跑一段脚本测试写的promise是否符合规范。首先需要在我们的promise增加如下代码// 测试脚本Promise.deferPromise.deferredfunction(){letdfd{}dfd.promisenewPromise((resolve,reject){dfd.resolveresolve dfd.rejectreject})returndfd}然后安装promises-aplus-tests包比如用npm可以使用命令npm install -g promises-aplus-tests安装到全局然后使用命令promises-aplus-tests 文件名即可进行测试里面有872测试用例全部通过即可以认为这是一个标准的promise。测试全部通过大功告成了