Loading... # 前言 > Promise是js进行异步处理的关键，也是面试中最常见的题目，本片文章会讲解最基本的Promise实现原理 ### Promise实现同步 ```js class MyPromise { constructor(callback){ this.success = 'null' // 成功的参数 this.error = 'null' // 失败的参数 this.state = 'null' // 当前状态（null/success /error let resolve = (params) => { // 成功的回调函数 this.success = params // 将成功的结果赋值给this.success this.state = 'success' // 更改this.state状态为成功 } let reject = (params) => { // 失败的回调函数 this.error = params // 将失败的结果赋值给this.success this.state = 'error' // 更改this.state状态为失败 } callback(resolve,reject) // 立即调用，将resolve 、reject 方法传回 } then(onResolve,onReject){ if (this.state === 'success') { // 根据this.state判断为成功，调用onResolve并传回结果 onResolve(this.success) } if (this.state === 'error') { // 根据this.state判断为失败，调用onResolve并传回结果 onReject(this.error) } } } new MyPromise((reslove,reject) => { reslove(1) }) .then((item) => { console.log(item) // 1 }) ``` 1、Promise实现同步很简单，无非就是利用了回调函数，我们可以看到，在new MyPromise 时，会将一个callback传入其中，constructor立即执行并调用callback，将resolve、reject 传回 ```js callback(resolve,reject) // 立即调用，将resolve 、reject 方法传回 ``` 2、调用reslove，并传回成功的参数，就会将成功的参数赋值给this.success进行存储，并将状态改为success成功 ```js let resolve = (params) => { this.success = params this.state = 'success' } ``` 失败结果亦是如此 ```js let reject = (params) => { this.error = params this.state = 'error' } ``` 3、此时我们就可以通过.then获取结果，在调用then时传回两个回调函数onResolve、onReject，在then方法中就会通过this.state判断当前是成功还是失败，并调用对应回调函数传回最终结果 ```js then(onResolve,onReject){ if (this.state === 'success') { onResolve(this.success) } if (this.state === 'error') { onReject(this.error) } } ``` ### Promise实现异步 ```js class MyPromise { constructor(callback){ this.success = 'null' // 成功的参数 this.error = 'null' // 失败的参数 this.state = 'null' // 当前状态（null/success /error ） this.successArr = [] // 成功的订阅 this.errorArr = [] // 失败的订阅 let resolve = (params) => { // 成功的回调函数 this.success = params // 将成功的结果赋值给this.success this.state = 'success' // 更改this.state状态为成功 this.successArr.forEach((item) => {item()}) // 遍历发布成功订阅 } let reject = (params) => { // 失败的回调函数 this.error = params // 将失败的结果赋值给this.success this.state = 'error' // 更改this.state状态为失败 this.errorArr.forEach((item) => {item()}) // 遍历发布失败订阅 } callback(resolve,reject) // 立即调用，将resolve 、reject 方法传回 } then(onResolve,onReject){ if (this.state === 'success') { // 根据this.state判断为成功，调用onResolve并传回结果 onResolve(this.success) } if (this.state === 'error') { // 根据this.state判断为失败，调用onResolve并传回结果 onReject(this.error) } if (this.state === 'null') { // 根据this.state判断没用结果，将onResolve、onReject分别存入对应的订阅中 this.successArr.push(() => { onResolve(this.success) }) this.errorArr.push(() => { onReject(this.error) }) } } } new MyPromise((reslove,reject) => { setTimeout(() => { reslove(10) }, 2000) }) .then((item) => { console.log(item) // 10 }) ``` 1、Promise实现异步利用了发布订阅，在reslove,reject都没用被调用时，this.state状态就会为空，此时就会将onResolve、onReject分别存入对应的订阅中 ```js if (this.state === 'null') { // 根据this.state判断没用结果，将onResolve、onReject分别存入对应的订阅中 this.successArr.push(() => { onResolve(this.success) }) this.errorArr.push(() => { onReject(this.error) }) } ``` 2、待到有结果时，就会调用reslove/reject，并将存储的订阅发布出去 ```js if (this.state === 'null') { // 根据this.state判断没用结果，将this.successArr.forEach((item) => {item()}) // 遍历发布成功订阅 this.errorArr.forEach((item) => {item()}) // 遍历发布失败订阅 ``` ### 一个小BUG 1、当返回一个没用定义的变量时会直接产生报错 ```js new MyPromise((reslove,reject) => { reslove(a) }) ``` 2、可以对callback进行处理，抛出异常 ```js try { callback(resolve,reject) } catch (error) { console.log(error) } ``` 最后修改：2022 年 12 月 07 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏
1 条评论
?国际化视角评语?