js手写promise
时间: 2023-03-14 20:19:43 浏览: 87
我可以给你一些关于手写promise的基本概念和实现:Promise 是一个 JavaScript 对象,用于处理异步操作的未来结果,实现异步编程。Promise 提供了 then()、catch() 和 finally() 方法来执行异步操作,以及处理它们的结果。
相关问题
js 手写promise
当你需要手写一个 Promise 的时候,你可以按照以下步骤进行:
1. 创建 Promise 构造函数,并传入一个执行器函数作为参数:
```javascript
function MyPromise(executor) {
// TODO: 实现 Promise 的状态和值的存储
}
```
2. 在构造函数中创建状态和值的存储变量,并初始化为初始状态:
```javascript
function MyPromise(executor) {
this.state = 'pending';
this.value = undefined;
// TODO: 实现其他必要的变量和逻辑
}
```
3. 定义 resolve 和 reject 函数,用于在异步操作完成时改变 Promise 的状态和值,并添加对应的回调函数:
```javascript
function MyPromise(executor) {
this.state = 'pending';
this.value = undefined;
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
// TODO: 触发所有注册的成功回调函数
}
};
const reject = (reason) => {
if (this.state === 'pending') {
this.state = 'rejected';
this.value = reason;
// TODO: 触发所有注册的失败回调函数
}
};
// TODO: 调用执行器函数,并传入 resolve 和 reject 函数
}
```
4. 在构造函数中调用执行器函数,并传入 resolve 和 reject 函数:
```javascript
function MyPromise(executor) {
this.state = 'pending';
this.value = undefined;
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
// TODO: 触发所有注册的成功回调函数
}
};
const reject = (reason) => {
if (this.state === 'pending') {
this.state = 'rejected';
this.value = reason;
// TODO: 触发所有注册的失败回调函数
}
};
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
```
5. 添加 then 方法,用于注册成功回调函数和失败回调函数,并返回一个新的 Promise 对象:
```javascript
function MyPromise(executor) {
this.state = 'pending';
this.value = undefined;
this.onFulfilledCallbacks = [];
this.onRejectedCallbacks = [];
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
// TODO: 触发所有注册的成功回调函数
}
};
const reject = (reason) => {
if (this.state === 'pending') {
this.state = 'rejected';
this.value = reason;
// TODO: 触发所有注册的失败回调函数
}
};
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
MyPromise.prototype.then = function(onFulfilled, onRejected) {
// 创建新的 Promise 对象
const newPromise = new MyPromise((resolve, reject) => {
// TODO: 根据当前 Promise 的状态和值执行对应的回调函数,并处理返回值
});
// 返回新的 Promise 对象
return newPromise;
};
```
6. 在成功回调函数和失败回调函数中处理返回值,并根据返回值的类型决定新 Promise 对象的状态和值:
```javascript
function MyPromise(executor) {
this.state = 'pending';
this.value = undefined;
this.onFulfilledCallbacks = [];
this.onRejectedCallbacks = [];
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
// TODO: 触发所有注册的成功回调函数
}
};
const reject = (reason) => {
if (this.state === 'pending') {
this.state = 'rejected';
this.value = reason;
// TODO: 触发所有注册的失败回调函数
}
};
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
MyPromise.prototype.then = function(onFulfilled, onRejected) {
const newPromise = new MyPromise((resolve, reject) => {
if (this.state === 'fulfilled') {
// 如果当前 Promise 已经是 fulfilled 状态,则异步执行成功回调函数
setTimeout(() => {
try {
const result = onFulfilled(this.value);
// 处理返回值,并根据返回值的类型决定新 Promise 对象的状态和值
handlePromiseResult(newPromise, result, resolve, reject);
} catch (error) {
reject(error);
}
}, 0);
} else if (this.state === 'rejected') {
// 如果当前 Promise 已经是 rejected 状态,则异步执行失败回调函数
setTimeout(() => {
try {
const result = onRejected(this.value);
// 处理返回值,并根据返回值的类型决定新 Promise 对象的状态和值
handlePromiseResult(newPromise, result, resolve, reject);
} catch (error) {
reject(error);
}
}, 0);
} else {
// 如果当前 Promise 还是 pending 状态,则将回调函数添加到对应的队列中,等待执行
this.onFulfilledCallbacks.push(() => {
setTimeout(() => {
try {
const result = onFulfilled(this.value);
handlePromiseResult(newPromise, result, resolve, reject);
} catch (error) {
reject(error);
}
}, 0);
});
this.onRejectedCallbacks.push(() => {
setTimeout(() => {
try {
const result = onRejected(this.value);
handlePromiseResult(newPromise, result, resolve, reject);
} catch (error) {
reject(error);
}
}, 0);
});
}
});
return newPromise;
};
function handlePromiseResult(promise, result, resolve, reject) {
if (promise === result) {
// 如果返回的是当前 Promise 对象本身,则抛出 TypeError
reject(new TypeError('Chaining cycle detected for promise'));
} else if (result instanceof MyPromise) {
// 如果返回的是一个 Promise 对象,则根据其状态和值决定新 Promise 对象的状态和值
if (result.state === 'fulfilled') {
resolve(result.value);
} else if (result.state === 'rejected') {
reject(result.value);
} else {
// 如果返回的 Promise 对象还是 pending 状态,则等待其状态改变后再决定新 Promise 对象的状态和值
result.then(resolve, reject);
}
} else if (result && (typeof result === 'object' || typeof result === 'function')) {
// 如果返回的是一个对象或函数,则尝试获取 then 方法
let then;
try {
then = result.then;
} catch (error) {
reject(error);
}
if (typeof then === 'function') {
// 如果返回值有 then 方法,则将其视为 Promise-like 对象,并调用 then 方法
const promiseLikeObj = new MyPromise(then.bind(result));
promiseLikeObj.then(resolve, reject);
} else {
// 如果返回值没有 then 方法,则将其视为普通值,并将其作为新 Promise 对象的值
resolve(result);
}
} else {
// 如果返回的是一个普通值,则将其作为新 Promise 对象的值
resolve(result);
}
}
```
以上是一个简单的手写 Promise 的实现,仅供参考。实际上,原生的 Promise 还包含了更多的特性和细节,比如处理异步操作、链式调用、错误处理等等。
js 手写promise.all
当你使用JavaScript时,可以手动实现Promise.all函数,下面是一个示例代码:
```javascript
function promiseAll(promises) {
return new Promise((resolve, reject) => {
let results = [];
let count = 0;
for (let i = 0; i < promises.length; i++) {
promises[i]
.then((result) => {
results[i] = result;
count++;
if (count === promises.length) {
resolve(results);
}
})
.catch((error) => {
reject(error);
});
}
if (promises.length === 0) {
resolve(results);
}
});
}
```
这个函数接受一个Promise数组作为参数,并返回一个新的Promise对象。它会等待所有的Promise都变为resolved状态后,才会将结果作为一个数组传递给resolve函数。如果其中任何一个Promise被rejected,则整个Promise.all也会被rejected。
你可以像下面这样使用它:
```javascript
const promise1 = Promise.resolve(1);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'Hello'));
const promise3 = new Promise((resolve, reject) => setTimeout(reject, 200, 'Oops!'));
promiseAll([promise1, promise2, promise3])
.then((results) => {
console.log(results); // [1, 'Hello']
})
.catch((error) => {
console.error(error); // 'Oops!'
});
```
在这个例子中,promise1立即被解决,promise2在100毫秒后被解决,而promise3在200毫秒后被拒绝。最终,Promise.all将返回一个包含promise1和promise2的结果的数组,并通过catch捕获promise3的拒绝原因。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)