JavaScript Promise 实现代码 - 手把手教你实现异步操作

下面是一个简单的 JavaScript Promise 的实现代码：\n\njavascript\n// Promise构造函数\nfunction Promise(fn) {\n var self = this;\n self.status = 'pending'; // Promise的状态，默认为pending\n self.value = undefined; // Promise的值，默认为undefined\n self.onResolvedCallback = []; // Promise resolve时的回调函数集合\n self.onRejectedCallback = []; // Promise reject时的回调函数集合\n\n function resolve(value) {\n if (self.status === 'pending') {\n self.status = 'resolved';\n self.value = value;\n // 依次执行所有的回调函数\n self.onResolvedCallback.forEach(function(callback) {\n callback(value);\n });\n }\n }\n\n function reject(reason) {\n if (self.status === 'pending') {\n self.status = 'rejected';\n self.value = reason;\n // 依次执行所有的回调函数\n self.onRejectedCallback.forEach(function(callback) {\n callback(reason);\n });\n }\n }\n\n // 执行传入的函数\n try {\n fn(resolve, reject);\n } catch (e) {\n reject(e);\n }\n}\n\n// then方法\nPromise.prototype.then = function(onResolved, onRejected) {\n var self = this;\n var promise2;\n\n // 如果onResolved不是函数，则将其设为一个默认的函数\n onResolved = typeof onResolved === 'function' ? onResolved : function(value) { return value; };\n // 如果onRejected不是函数，则将其设为一个默认的函数\n onRejected = typeof onRejected === 'function' ? onRejected : function(reason) { throw reason; };\n\n if (self.status === 'resolved') {\n // 如果Promise的状态已经是resolved，则立即执行onResolved函数，并返回一个新的Promise对象\n return promise2 = new Promise(function(resolve, reject) {\n try {\n var x = onResolved(self.value);\n if (x instanceof Promise) {\n // 如果onResolved函数的返回值是一个Promise对象，则直接取其结果作为promise2的结果\n x.then(resolve, reject);\n } else {\n resolve(x);\n }\n } catch (e) {\n reject(e);\n }\n });\n }\n\n if (self.status === 'rejected') {\n // 如果Promise的状态已经是rejected，则立即执行onRejected函数，并返回一个新的Promise对象\n return promise2 = new Promise(function(resolve, reject) {\n try {\n var x = onRejected(self.value);\n if (x instanceof Promise) {\n // 如果onRejected函数的返回值是一个Promise对象，则直接取其结果作为promise2的结果\n x.then(resolve, reject);\n } else {\n resolve(x);\n }\n } catch (e) {\n reject(e);\n }\n });\n }\n\n if (self.status === 'pending') {\n // 如果Promise的状态是pending，则将onResolved和onRejected函数分别添加到onResolvedCallback和onRejectedCallback数组中\n return promise2 = new Promise(function(resolve, reject) {\n self.onResolvedCallback.push(function(value) {\n try {\n var x = onResolved(value);\n if (x instanceof Promise) {\n // 如果onResolved函数的返回值是一个Promise对象，则直接取其结果作为promise2的结果\n x.then(resolve, reject);\n } else {\n resolve(x);\n }\n } catch (e) {\n reject(e);\n }\n });\n\n self.onRejectedCallback.push(function(reason) {\n try {\n var x = onRejected(reason);\n if (x instanceof Promise) {\n // 如果onRejected函数的返回值是一个Promise对象，则直接取其结果作为promise2的结果\n x.then(resolve, reject);\n } else {\n resolve(x);\n }\n } catch (e) {\n reject(e);\n }\n });\n });\n }\n};\n\n// 测试代码\nvar p = new Promise(function(resolve, reject) {\n setTimeout(function() {\n resolve('Hello, World!');\n }, 1000);\n});\n\np.then(function(value) {\n console.log(value); // 输出：Hello, World!\n});\n\n\n这是一个简单的Promise实现，包含了Promise构造函数和then方法。在构造函数中，我们定义了resolve和reject函数，并调用传入的函数。在then方法中，我们根据Promise的状态执行相应的回调函数，并返回一个新的Promise对象。\n