网站添加谷歌地图,如何在微信公众号中导入wordpress,做视频包的网站有哪些,通过服务推广网站一#xff1a;什么是 Promise Promise 是异步编程的一种解决方案#xff0c;其实是一个构造函数#xff0c;自己身上有all、reject、resolve这几个方法#xff0c;原型上有then、catch等方法。
Promise对象有以下两个特点。
#xff08;1#xff09;对象的状态不受…一什么是 Promise Promise 是异步编程的一种解决方案其实是一个构造函数自己身上有all、reject、resolve这几个方法原型上有then、catch等方法。
Promise对象有以下两个特点。
1对象的状态不受外界影响。Promise对象代表一个异步操作有三种状态pending进行中、fulfilled已成功和rejected已失败。只有异步操作的结果可以决定当前是哪一种状态任何其他操作都无法改变这个状态。这也是Promise这个名字的由来它的英语意思就是“承诺”表示其他手段无法改变。
2一旦状态改变就不会再变任何时候都可以得到这个结果。Promise对象的状态改变只有两种可能从pending变为fulfilled和从pending变为rejected。只要这两种情况发生状态就凝固了不会再变了会一直保持这个结果这时就称为 resolved已定型。如果改变已经发生了你再对Promise对象添加回调函数也会立即得到这个结果。这与事件Event完全不同事件的特点是如果你错过了它再去监听是得不到结果的。
二手写Promise
1、实例方法catch、finally
设计思路
内部调用then
处理异常
代码实现
bodyscript// 定义函数function runAsynctask(callback) {// callback 是一个回调函数// 调用核心apiif (typeof queueMicrotask function) { // 调用三个函数是为了解决浏览器不兼容问题先判断是不是函数queueMicrotask(callback)} else if (typeof MutationObserver function) {const obs new MutationObserver(callback)const divNode document.createElement(div)obs.observe(divNode, { childList: true })divNode.innerHTML 打酱油改变以下内容} else {setTimeout(callback, 0)}}const PENDING pendingconst FULFILLED fulfilledconst REJECTED rejectedclass wePromise {state PENDING // 状态result undefined // 原因#handlers [] // [{onFulfilled,onReject},......]// 构造函数constructor(func) {// 改状态pending fulfilledconst reslove (result) {if (this.state PENDING) {this.state FULFILLEDthis.result result// 下面这个是异步的时候先保存然后到这一步执行就取出保存的函数并且执行this.#handlers.forEach(({ onFulfilled }) { // 解构onFulfilled(this.result)})}}// 改状态pending rejectedconst reject (result) {if (this.state PENDING) {this.state REJECTEDthis.result resultthis.#handlers.forEach(({ onReject }) {onReject(this.result)})}}// 异常的处理try {// 执行回调函数func(reslove, reject)} catch (error) {reject(error)}}then(onFulfilled, onReject) {// 判断传入的参数是不是函数onFulfilled typeof onFulfilled function ? onFulfilled : x xonReject typeof onReject function ? onReject : x { throw x }const p2 new wePromise((reslove, reject) {// 判断执行完成后的状态if (this.state FULFILLED) {runAsynctask(() {try {// 获取返回值const x onFulfilled(this.result) // 返回结果reslovePromise(p2, x, reslove, reject)} catch (error) {// 处理异常reject(error)}})} else if (this.state REJECTED) {runAsynctask(() {try {const x onReject(this.result)reslovePromise(p2, x, reslove, reject)} catch (error) {reject(error)}})} else if (this.state PENDING) { // 还没有改变状态说明是异步// 保存回调函数this.#handlers.push({onFulfilled: () {runAsynctask(() {try {const x onFulfilled(this.result) // 返回结果reslovePromise(p2, x, reslove, reject)} catch (error) {reject(error)}})},onReject: () {runAsynctask(() {try {const x onReject(this.result) // 返回结果reslovePromise(p2, x, reslove, reject)} catch (error) {reject(error)}})}})}})return p2}catch(onReject) {// 内部调用then方法return this.then(undefined, onReject)}finally(onFinally){return this.then(onFinally,onFinally)}}function reslovePromise(p2, x, reslove, reject) {// 处理重复引用if (x p2) {// 抛出错误throw new TypeError(Chaining cycle detected for promise #Promise)}// 处理返回的Promiseif (x instanceof wePromise) {// 调用then方法x.then(res reslove(res), err reject(err))} else {// 处理返回值reslove(x)}}// 创建对象调用两个方法const p new wePromise((reslove, reject) {// reslove(success)// reject(reject)throw throw-error})p.then(res {console.log(成功回调1, res);// throw throw-error// return 2}).catch(err {console.log(失败回调1, err);}).finally(() {console.log(finally);})/script
/body
运行效果 2、静态方法reslove、reject、race
reslove、reject设计思路
判断传入值Promise返回转换为Promise返回 race设计思路 返回Promise判断是否为数组等待第一个敲定
all设计思路
返回Promise判断是否为数组空数组直接兑换处理全部兑换记录结果 -- 判断全部兑现处理第一个拒绝
allSettled设计思路
返回Promise判断是否为数组空数组直接兑换等待全部敲定记录结果 -- 处理兑换 或 拒绝
any设计思路
返回Promise判断是否为数组空数组直接拒绝等待结果第一个兑现全部拒绝
代码实现
bodyscript// 定义函数function runAsynctask(callback) {// callback 是一个回调函数// 调用核心apiif (typeof queueMicrotask function) { // 调用三个函数是为了解决浏览器不兼容问题先判断是不是函数queueMicrotask(callback)} else if (typeof MutationObserver function) {const obs new MutationObserver(callback)const divNode document.createElement(div)obs.observe(divNode, { childList: true })divNode.innerHTML 打酱油改变以下内容} else {setTimeout(callback, 0)}}const PENDING pendingconst FULFILLED fulfilledconst REJECTED rejectedclass wePromise {state PENDING // 状态result undefined // 原因#handlers [] // [{onFulfilled,onReject},......]// 构造函数constructor(func) {// 改状态pending fulfilledconst reslove (result) {if (this.state PENDING) {this.state FULFILLEDthis.result result// 下面这个是异步的时候先保存然后到这一步执行就取出保存的函数并且执行this.#handlers.forEach(({ onFulfilled }) { // 解构onFulfilled(this.result)})}}// 改状态pending rejectedconst reject (result) {if (this.state PENDING) {this.state REJECTEDthis.result resultthis.#handlers.forEach(({ onReject }) {onReject(this.result)})}}// 异常的处理try {// 执行回调函数func(reslove, reject)} catch (error) {reject(error)}}then(onFulfilled, onReject) {// 判断传入的参数是不是函数onFulfilled typeof onFulfilled function ? onFulfilled : x xonReject typeof onReject function ? onReject : x { throw x }const p2 new wePromise((reslove, reject) {// 判断执行完成后的状态if (this.state FULFILLED) {runAsynctask(() {try {// 获取返回值const x onFulfilled(this.result) // 返回结果reslovePromise(p2, x, reslove, reject)} catch (error) {// 处理异常reject(error)}})} else if (this.state REJECTED) {runAsynctask(() {try {const x onReject(this.result)reslovePromise(p2, x, reslove, reject)} catch (error) {reject(error)}})} else if (this.state PENDING) { // 还没有改变状态说明是异步// 保存回调函数this.#handlers.push({onFulfilled: () {runAsynctask(() {try {const x onFulfilled(this.result) // 返回结果reslovePromise(p2, x, reslove, reject)} catch (error) {reject(error)}})},onReject: () {runAsynctask(() {try {const x onReject(this.result) // 返回结果reslovePromise(p2, x, reslove, reject)} catch (error) {reject(error)}})}})}})return p2}// 实例方法catch(onReject) {// 内部调用then方法return this.then(undefined, onReject)}finally(onFinally) {return this.then(onFinally, onFinally)}// 静态方法static reslove(value) {// 判断传入的是不是Promise对象if (value instanceof wePromise) {return value}return new wePromise((reslove, reject) {reslove(value)})}static reject(value) {return new wePromise((reslove, reject) {reject(value)})}static race(promises) {return new wePromise((reslove, reject) {// 判断是否为数组if (!Array.isArray(promises)) {return reject(new TypeError(Argument is not iterable))}// 等待第一个敲定promises.forEach(p {wePromise.reslove(p).then(res { reslove(res) }, err { reject(err) })})})}// 重要static all(promises) {// 返回Promise实例return new wePromise((reslove, reject) {// 判断是否为数组if (!Array.isArray(promises)) {return reject(new TypeError(Argument is not iterable))}// 空数组直接兑换promises.length 0 reslove(promises)// 处理全部兑现const results []let count 0promises.forEach((p, index) {wePromise.reslove(p).then(res {results[index] rescount// 判断全部兑现count promises.length reslove(results)}, err {// 处理第一个拒绝reject(err)})})})}static allSettled(promises) {// 返回Promise实例return new wePromise((reslove, reject) {// 判断是否为数组if (!Array.isArray(promises)) {return reject(new TypeError(Argument is not iterable))}// 空数组直接兑换promises.length 0 reslove(promises)// 等待全部敲定const results []let count 0promises.forEach(p {// 之所以是使用这个静态方法是因为这个将传入的对象包装成了wePromisewePromise.reslove(p).then((res {// 处理兑现results[index] { status: FULFILLED, value: res }countcount promises.length reslove(results)}, err {results[index] { status: REJECTED, reason: err }countcount promises.length reslove(results)}))})})}static any(promises) {return new wePromise((reslove, reject) {// 判断是否为数组if (!Array.isArray(promises)) {return reject(new TypeError(Argument is not iterable))}// 空数组直接拒绝promises.length 0 reject(new AggregateError(promises, All promises were rejected))// 等待结果const errors []let count 0promises.forEach((p, index) {wePromise.reslove(p).then(res {// 第一个兑现reslove(res)}, err {// 全部拒绝errors promises.length reject(new AggregateError(errors, All promises were rejected))})})})}}function reslovePromise(p2, x, reslove, reject) {// 处理重复引用if (x p2) {// 抛出错误throw new TypeError(Chaining cycle detected for promise #Promise)}// 处理返回的Promiseif (x instanceof wePromise) {// 调用then方法x.then(res reslove(res), err reject(err))} else {// 处理返回值reslove(x)}}// 创建对象调用两个方法const p new wePromise((reslove, reject) {// reslove(success)// reject(reject)throw throw-error})p.then(res {console.log(成功回调1, res);// throw throw-error// return 2}).catch(err {console.log(失败回调1, err);}).finally(() {console.log(finally);})/script
/body
运行效果 这里运行效果请复制代码自己测实例方法和静态方法已经是全部实现了的。
三总结 Promise 是异步编程的一种解决方案其在工作的项目开发中是非常常用的熟练的掌握Promise 的内容熟悉底层源码可以让我们在项目开发中具备更高超的代码书写能力同时降低自己在使用Promise 出现的各种bug。好啦Promise 源码系列到此就算是结束啦希望能够对各位小伙伴有所帮助哦
