javascript中Promise封装（进阶） |
您所在的位置：网站首页 › js封装函数代码 › javascript中Promise封装（进阶） |
|
手撕Promise
👨🏼🦳👨🏼🦰 文件结构 以及 方法了解 🧓🏼01 - 搭建基本结构 🍠02 - Promise中 resolve 和 reject 结构 🥩03 - Promise中 then 方法 🌯04 - Promise中 catch 方法 🥠05 - Promise 中 resolve 方法 🥙05 - Promise 中 reject 方法 🥪🥟🌮06 - Promise 中 all 方法 🥟🌮07 - Promise 中 race 方法 🥟
完整代码 🌮
👨🏼🦳👨🏼🦰 文件结构 以及 方法了解 🧓🏼
👇 index.html 👇 promise.js 接下来我们将封装 promise实例方法 👇 then catch 接下来我们将封装 promise静态方法 👇 resolve reject all race 01 - 搭建基本结构 🍠index.html let p = new Promise((resolve,reject) => { })promise.js class Promise { constructor(executor) { } } 02 - Promise中 resolve 和 reject 结构 🥩index.html let p = new Promise((resolve,reject) => { resolve(); reject(); throw "errro"; })promise.js Promise 中有 三种 状态： pending 未决定的 fulfilled 成功的 rejected 失败的 调用里面的 resolve 则状态改变为 fulfilled。 调用里面的 reject 则状态改变为 rejected。 如果什么都不写则状态默认为 pending。 如果在抛出错误则 返回一个 rejected 状态。 注意： 在 promise 中只能改变一次状态，则下面的代码会进行忽略。 class Promise { constructor(executor) { this.PromiseState = "pending"; this.PromiseResult = null; var resolve = value => { if (this.PromiseState != "pending") return; this.PromiseState = "fulfilled"; this.PromiseResult = value; } var reject = reason => { if (this.PromiseState != "pending") return; this.PromiseState = "rejected"; this.PromiseResult = reason; } try { executor(resolve,reject); } catch (e) { reject(e); } } } 03 - Promise中 then 方法 🌯index.html let p = new Promise((resolve, reject) => { setTimeout(() => { // resolve('123'); reject("error"); }, 1000); // reject("error"); // throw "error"; }); // console.log(p); let res = p.then( value => { console.log(value); // return "123"; return new Promise((resolve, reject) => { // resolve("123"); reject("error"); // throw "error"; }); }, reason => { console.log(reason); // return "123"; return new Promise((resolve, reject) => { // resolve("123"); // reject("error"); // throw "error"; }); } ); console.log(res);promise.js class Promise { constructor(executor) { this.callBack = []; this.PromiseState = "pending"; this.PromiseResult = null; var resolve = value => { if (this.PromiseState != "pending") return; this.PromiseState = "fulfilled"; this.PromiseResult = value; this.callBack.forEach(item => { item.onResolved(value); }) } var reject = reason => { if (this.PromiseState != "pending") return; this.PromiseState = "rejected"; this.PromiseResult = reason; this.callBack.forEach(item => { item.onRejected(reason); }) } try { executor(resolve,reject); } catch (e) { reject(e); } } then(onResolved,onRejected) { return new Promise((resolve,reject) => { let callBack = (type) => { try { // 获取回调函数执行结果 let result = type(this.PromiseResult); // console.log(result); if (result instanceof Promise) { result.then(v => { resolve(v); }, r => { reject(r); }) } else { resolve(result); } } catch (e) { reject(e); } } // 成功的 if (this.PromiseState == "fulfilled") { callBack(onResolved) } // 失败的 if (this.PromiseState == "rejected") { callBack(onRejected); } // 未决定的 if (this.PromiseState == "pending") { this.callBack.push({ onResolved: () => { callBack(onResolved); }, onRejected: () => { callBack(onRejected); }, }) }; }) } } 04 - Promise中 catch 方法 🥠index.html let p = new Promise((resolve, reject) => { reject("error"); // throw "213"; // resolve("213"); }); let res = p .then(value => { console.log(111); }) .then(value => { console.log(222); }) .catch(reason => { console.log(reason); }); console.log(res);promise.js class Promise { constructor(executor) { this.callBack = []; this.PromiseState = "pending"; this.PromiseResult = null; var resolve = value => { if (this.PromiseState != "pending") return; this.PromiseState = "fulfilled"; this.PromiseResult = value; this.callBack.forEach(item => { item.onResolved(value); }) } var reject = reason => { if (this.PromiseState != "pending") return; this.PromiseState = "rejected"; this.PromiseResult = reason; this.callBack.forEach(item => { item.onRejected(reason); }) } try { executor(resolve,reject); } catch (e) { reject(e); } } then(onResolved,onRejected) { if (typeof onResolved != "function") { onResolved = value => value; } if (typeof onRejected !== "function") { onRejected = reason => { throw reason; } } return new Promise((resolve,reject) => { let callBack = (type) => { try { // 获取回调函数执行结果 let result = type(this.PromiseResult); // console.log(result); if (result instanceof Promise) { result.then(v => { resolve(v); }, r => { reject(r); }) } else { resolve(result); } } catch (e) { reject(e); } } // 成功的 if (this.PromiseState == "fulfilled") { callBack(onResolved) } // 失败的 if (this.PromiseState == "rejected") { callBack(onRejected); } // 未决定的 if (this.PromiseState == "pending") { this.callBack.push({ onResolved: () => { callBack(onResolved); }, onRejected: () => { callBack(onRejected); }, }) }; }) } catch(fn) { return this.then(undefined,fn); } } 05 - Promise 中 resolve 方法 🥙index.html let p = Promise.resolve( new Promise((resolve, reject) => { // resolve("123"); // reject("error"); throw "wee"; }) ); console.log(p);promise.js static resolve(data) { return new Promise((resolve,reject) => { try { if (data instanceof Promise) { data.then(value => { resolve(value); },reason => { reject(reason); }) } else { resolve(data); } }catch(e) { reject(e); } }) } 05 - Promise 中 reject 方法 🥪🥟🌮index.html let p = Promise.reject( // "error" // new Promise((resolve, reject) => { // // resolve("123"); // // reject("error"); // throw "wee"; // }) ); console.log(p);promise.js static reject(data) { return new Promise((resolve,reject) => { reject(data); }) } 06 - Promise 中 all 方法 🥟🌮index.html let p1 = new Promise((resolve, reject) => { resolve("OK"); }); let p2 = Promise.resolve("nice"); let p3 = Promise.resolve("nice a"); let res = Promise.all([p1, p2, p3]); console.log(res);promise.js static all(value) { return new Promise((resolve,reject) => { let count = 0; let arr = []; value.forEach((item,index) => { item.then(v => { count++; arr[index] = v; if (count === value.length) { resolve(arr); } },r => { reject(r); }) }) }) } 07 - Promise 中 race 方法 🥟index.html let p1 = new Promise((resolve, reject) => { resolve("OK"); }); let p2 = Promise.resolve("nice"); let p3 = Promise.resolve("nice a"); let res = Promise.all([p1, p2, p3]); console.log(res);promise.js static all(value) { return new Promise((resolve,reject) => { let count = 0; let arr = []; value.forEach((item,index) => { item.then(v => { count++; arr[index] = v; if (count === value.length) { resolve(arr); } },r => { reject(r); }) }) }) } 完整代码 🌮 class Promise { constructor(executor) { this.callBack = []; this.PromiseState = "pending"; this.PromiseResult = null; var resolve = value => { if (this.PromiseState != "pending") return; this.PromiseState = "fulfilled"; this.PromiseResult = value; this.callBack.forEach(item => { item.onResolved(value); }) } var reject = reason => { if (this.PromiseState != "pending") return; this.PromiseState = "rejected"; this.PromiseResult = reason; this.callBack.forEach(item => { item.onRejected(reason); }) } try { executor(resolve,reject); } catch (e) { reject(e); } } then(onResolved,onRejected) { if (typeof onResolved != "function") { onResolved = value => value; } if (typeof onRejected !== "function") { onRejected = reason => { throw reason; } } return new Promise((resolve,reject) => { let callBack = (type) => { try { // 获取回调函数执行结果 let result = type(this.PromiseResult); // console.log(result); if (result instanceof Promise) { result.then(v => { resolve(v); }, r => { reject(r); }) } else { resolve(result); } } catch (e) { reject(e); } } // 成功的 if (this.PromiseState == "fulfilled") { callBack(onResolved) } // 失败的 if (this.PromiseState == "rejected") { callBack(onRejected); } // 未决定的 if (this.PromiseState == "pending") { this.callBack.push({ onResolved: () => { callBack(onResolved); }, onRejected: () => { callBack(onRejected); }, }) }; }) } catch(fn) { return this.then(undefined,fn); } static resolve(data) { return new Promise((resolve,reject) => { try { if (data instanceof Promise) { data.then(value => { resolve(value); },reason => { reject(reason); }) } else { resolve(data); } }catch(e) { reject(e); } }) } static reject(data) { return new Promise((resolve,reject) => { reject(data); }) } static all(value) { return new Promise((resolve,reject) => { let count = 0; let arr = []; value.forEach((item,index) => { item.then(v => { count++; arr[index] = v; if (count === value.length) { resolve(arr); } },r => { reject(r); }) }) }) } static race(value) { return new Promise((resolve,reject) => { value.forEach(item => { item.then(v => { resolve(v); },r => { reject(r); }) }) }) } } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |