Promise를 구현하기 위해 손으로 작성한 JS
- Guanhui앞으로
- 2020-05-07 09:17:382781검색
Promise 개요
Promise는 매번 new를 사용하여 인스턴스를 생성하는 데 사용할 수 있는 생성자입니다. 이 세 가지 상태는 보류되지 않습니다. 외부 세계의 영향을 받으며 상태는 보류 중에서 완료(성공), 보류 중(실패)으로만 변경될 수 있으며, 일단 변경되면 다시 변경되지 않으며 성공 결과를 반환합니다. 최근 제안에서는 해결, 거부, 포착, 최종, 다음, 모두, 경주 및 완료 외에도 성공 여부에 관계없이 반환되는 allSettled 메서드가 추가되었습니다. 다음으로, 전체 Promise
executor 함수를 구현합니다.
Promise 인스턴스를 생성할 때 executor 함수는 두 개의 매개변수(Resolve 및 Reject)를 전달합니다. 잘못하면 Promise 인스턴스 상태가 거부됩니다
class MyPromise{
constructor(executor) {
this.status = "pending"; // 初始化状态为pending
this.value = undefined; // 初始化返回的成功的结果或者失败的原因
// 这里是resolve方法，成功后执行，将状态改变为resolved，并且将结果返回
let resolve = result => {
if(this.status !== "pending") return; // 状态一旦改变，就不会再变
this.status = "resolved";
this.value = result;
}
// 这里是reject方法，异常时执行，状态改为rejected，并且将失败的原因返回
let reject = reason => {
if(this.status !== "pending") return;
this.status = "rejected";
this.value = reason;
}
// try、catch捕获异常，如果错误，执行reject方法
try {
executor(resolve, reject)
} catch(err) {
reject(err)
}
}
}확인해 보겠습니다. 이제 Promise는 어떻게 생겼나요
let p1 = new MyPromise((resolve, reject) => {
resolve(1);
})
let p2 = new MyPromise((resolve, reject) => {
reject(2);
})
console.log(p1);
console.log(p2);상태가 변경된 것을 볼 수 있으며, 그 안에 있는 값도 성공의 결과이자 이유입니다. 실패를 위해. then 메소드에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 성공 시 실행되고 두 번째 매개변수는 실패 후 실행됩니다. then의 체인 호출은 배열 등과 동일하며 각 실행 후에 Promise 인스턴스가 반환됩니다. 성공 후 첫 번째 성공 함수가 null이면 null이 아닌 함수가 실행될 때까지 계속해서 아래쪽으로 검색합니다. 이전 then에서 반환된 결과는 다음 함수의 성공 여부에 직접적인 영향을 미칩니다. 이것을 이해한 후 구현해 보도록 하겠습니다~
then method
then(resolveFn, rejectFn) {
// 如果传入的两个参数不是函数，则直接执行返回结果
let resolveArr = [];
let rejectArr = [];
if(typeof resolveFn !== "function") {
resolveFn = result => {
return result;
}
}
if(typeof rejectFn !== "function") {
rejectFn = reason => {
return MyPromise.reject(reason);
}
}
return new Mypromise((resolve, reject) => {
resolveArr.push(result => {
try {
let x = resolveFn(result);
if(x instanceof MyPromise) {
x.then(resolve, reject)
return;
}
resolve(x);
} catch(err) {
reject(err)
}
})
rejectArr.push(reason => {
try {
let x = rejectFn(reason);
if(x instanceof MyPromise) {
x.then(resolve, reject)
return;
}
resolve(x);
} catch(err) {
reject(err)
}
})
})
}위의 코드를 정리해보자
class MyPromise{
constructor(executor) {
this.status = "pending"; // 初始化状态为pending
this.value = undefined; // 初始化返回的成功的结果或者失败的原因
this.resolveArr = []; // 初始化then中成功的方法
this.rejectArr = []; // 初始化then中失败的方法
// 定义change方法，因为我们发现好像resolve和reject方法共同的地方还挺多
let change = (status, value) => {
if(this.status !== "pending") return; // 状态一旦改变，就不会再变
this.status = status;
this.value = value;
// 根据状态判断要执行成功的方法或失败的方法
let fnArr = status === "resolved" ? this.resolveArr : this.rejectArr;
// fnArr中的方法依次执行
fnArr.forEach(item => {
if(typeof item !== "function") return;
item(this. value);
})
}
// 这里是resolve方法，成功后执行，将状态改变为resolved，并且将结果返回
let resolve = result => {
change("resolved", result)
}
// 这里是reject方法，异常时执行，状态改为rejected，并且将失败的原因返回
let reject = reason => {
change("rejected", reason);
}
// try、catch捕获异常，如果错误，执行reject方法
try {
executor(resolve, reject)
} catch(err) {
reject(err)
}
}
then(resolveFn, rejectFn) {
// 如果传入的两个参数不是函数，则直接执行返回结果
if(typeof resolveFn !== "function") {
resolveFn = result => {
return result;
}
}
if(typeof rejectFn !== "function") {
rejectFn = reason => {
return MyPromise.reject(reason);
}
}
return new MyPromise((resolve, reject) => {
this.resolveArr.push(result => {
try {
let x = resolveFn(result); // 获取执行成功方法返回的结果
// 如果x是一个promise实例，则继续调用then方法 ==> then链的实现
if(x instanceof MyPromise) {
x.then(resolve, reject)
return;
}
// 不是promise实例，直接执行成功的方法
resolve(x);
} catch(err) {
reject(err)
}
})
this.rejectArr.push(reason => {
try {
let x = rejectFn(reason);
if(x instanceof MyPromise) {
x.then(resolve, reject)
return;
}
resolve(x);
} catch(err) {
reject(err)
}
})
})
}
}효과를 살펴보겠습니다
new MyPromise((resolve, reject) => {
resolve(1);
}).then(res => {
console.log(res, 'success');
}, err => {
console.log(err, 'error');
})이때 문제가 발생하여 뭔가를 발견했습니다. like 출력이 없습니다. 위의 테스트 예를 약간 변경하면 어떻게 될까요?
new MyPromise((resolve, reject) => {
setTimeout(_ => {
resolve(1);
}, 0)
}).then(res => {
console.log(res, 'success'); // 1 "success"
}, err => {
console.log(err, 'error');
})Promise 인스턴스가 생성된 직후 executor 함수가 실행되고 then 메소드가 아직 실행되지 않았기 때문에 성공, 실패에 관계없이 배열이 비어 있기 때문입니다. 그렇다면 다시 질문이 생길 수 있습니다. setTimeout을 추가한 후 왜 제대로 작동합니까? 이는 이벤트 큐 메커니즘에서 setTimeout이 이벤트 큐에 배치되고 메인 스레드가 완료된 후에 실행되기 때문입니다. 이때 then 메소드는 성공 또는 실패 함수를 저장하여 성공적인 배열인지 여부를 확인합니다. 또는 실패한 배열, 이미 값이 있고 이때 실행하면 완료됩니다~
하지만 사용할 때 setTimeout을 솔루션으로 작성할 수는 없으므로 문제를 내부에서 해결해야 합니다. 이 아이디어에 따르면, 해결 및 거부 메소드가 실행될 때 배열에 값이 있는지 확인할 수도 있습니다. 그렇지 않은 경우 setTimeout을 사용하여 실행을 지연시킬 수 있습니다~
// 这里是resolve方法，成功后执行，将状态改变为resolved，并且将结果返回
let resolve = result => {
// 如果数组中有值，则立即改变状态
if(this.resolveArr.length > 0) {
change("resolved", result)
}
// 如果没值，则延后改变状态
let timer = setTimeout(_ => {
change("resolved", result)
clearTimeout(timer);
}, 0)
}
// 这里是reject方法，异常时执行，状态改为rejected，并且将失败的原因返回
let reject = reason => {
// 如果数组中有值，则立即改变状态
if(this.rejectArr.length > 0) {
change("rejected", reason);
}
// 如果没值，则延后改变状态
let timer = setTimeout(_ => {
change("rejected", reason);
clearTimeout(timer);
}, 0)
}이제 다시 시도해 보겠습니다
// 1、已经成功了
new MyPromise((resolve, reject) => {
resolve('我成功啦，吼吼吼～～～～');
reject('我都已经成功了，你别想让我失败，哼～～');
}).then(res => {
console.log(res, 'success'); // 我成功啦，吼吼吼～～～～ success
}, err => {
console.log(err, 'error');
})
// 2、先失败了
new MyPromise((resolve, reject) => {
reject('失败了，我好委屈，呜呜呜～～');
resolve('已经失败了～～～');
}).then(res => {
console.log(res, 'success');
}, err => {
console.log(err, 'error'); // 失败了，我好委屈，呜呜呜～～ error
})
// 3、链式调用
new MyPromise((resolve, reject) => {
reject('失败了，我好委屈，呜呜呜～～');
resolve('已经失败了～～～');
}).then(res => {
console.log(res);
}, err => {
console.log(err, 'error'); // 失败了，我好委屈，呜呜呜～～ error
return '我要发奋图强，不会被困难所击倒，我要成功！！！'
}).then(res1 => {
console.log(res1, '经过不懈努力，我终于在第二次成功了～'); // 我要发奋图强，不会被困难所击倒，我要成功！！！ 经过不懈努力，我终于在第二次成功了～
}, err1 => {
console.log(err1, '第二次失败');
})완벽합니다. 첫 번째 호출 시 then 메소드가 실행되지 않는 문제를 해결했습니다. 동시에 연쇄 호출이 구현됩니다. 체인 호출에 관해서는 몇 마디 더 말씀드리겠습니다. 사실 배열의 체인 호출과 관계없이 이 인스턴스가 지난번에 반환되었기 때문입니다.
catch method
catch method는 예외를 catch하는 것으로 then method의 두 번째 콜백 함수와 동일합니다
catch(rejectFn) {
return this.then(null, rejectFn)
}resolve method
Promsie도 이런 방식으로 사용할 수 있다는 것을 알고 있습니다
let p1 = MyPromise.resolve(1); console.log(p1);
우리는 이러한 작성 방식을 기대하지만 이제 확실히 오류가 발생합니다. MyPromise.resolve는 메서드가 아닙니다
이제 우리는 해결 메서드를 캡슐화해야 합니다. 우리가 분명히 해야 할 것은 해결 후에 Promise가 지원한다는 것입니다. 체인에서 then을 계속 호출하므로 우리는 해결 메소드를 실행하고 Promise 인스턴스
static resolve(result) {
// 返回新的promise实例，执行promise实例中resolve方法
return new MyPromise(resolve => {
resolve(result)
})
}reject 메소드
실패한 함수
static reject(reason) {
// 返回新的promise实例，执行promise实例中reject方法
return new MyPromise((_, reject) => {
reject(reason);
})
}done 메소드를 수신한다는 점을 제외하고는 해결 메소드와 같습니다
done(resolveFn, rejectFn) {
this.then(resolveFn, rejectFn)
.catch(reason => {
setTimeout(() => {
throw reason;
}, 0)
})
}
done 메소드를 반환해야 합니다.
ES6 표준 소개서에서 done 메소드에 대한 설명은 다음과 같습니다. Promise 객체의 콜백 체인이 then 메소드나 catch 메소드로 끝나더라도 마지막 메소드에서 오류가 발생하는 한 그렇지 않을 수 있습니다. 붙잡히다. 이를 위해 Promise는 항상 콜백 체인의 끝에 있으며 발생할 수 있는 모든 오류가 발생하도록 보장되는 done 메서드를 제공합니다. 좋아요, 이 메소드가 무엇인지 알았으니 이제 작성을 시작하겠습니다 ~
finally(finallyFn) {
let P = this.constructor;
return this.then(
value => P.resolve(finallyFn()).then(() => value),
reason => P.reject(finallyFn()).then(() => reason)
)
}이행 및 거부 상태에서 콜백 함수를 수신할 수 있거나 매개변수를 제공할 수 없습니다. 하지만 무슨 일이 있어도 done 메소드는 가능한 모든 오류를 잡아서 전역
finally 메소드finally 메소드는 성공이나 실패에 관계없이 실행되는 메소드입니다. 이와 같은 메소드도 작은 항목에 포함됩니다. 프로그램 완성 메소드 등을 구현해 보도록 하죠~
new MyPromise((resolve, reject) => {
reject('失败了，我好委屈，呜呜呜～～');
resolve('已经失败了～～～');
}).then(res => {
console.log(res);
}, err => {
console.log(err, 'error'); // 失败了，我好委屈，呜呜呜～～ error
return '我要发奋图强，不会被困难所击倒，我要成功！！！'
}).finally(() => {
console.log('执行了吗'); // 这里会输出"执行了吗"
}) 검증해보자// 接收数组参数
static all(promiseList) {
// 返回新实例，调用后还可使用then、catch等方法
return new MyPromise((resolve, reject) => {
let index = 0, // 成功次数计数
results = []; // 返回的结果
for(let i = 0; i < promiseList.length; i++) {
let item = promiseList[i];
// 如果item不是promise实例
if(!(item instanceof MyPromise)) return;
item.then(result => {
index++;
results[i] = result;
if(index === promiseList.length) {
resolve(results);
}
}).catch(reason => {
reject(reason);
})
}
})
}
모든 메소드는 배열을 받고, 배열의 각 인스턴스가 성공하면 반환되며, 또한 배열을 반환하면 각 매개변수는 해당 Promise에서 반환한 결과입니다. 하나의 항목이 실패하면 모든 메서드는 이를 확인하기 위해 failure
// 1.有失败的情况
let p1 = MyPromise.resolve(1);
let p2 = MyPromise.reject(2);
let p3 = MyPromise.resolve(3);
MyPromise.all([p1, p2, p3])
.then(res => {
console.log(res);
}).catch(err => {
console.log(err, 'err'); // 2 "err"
})
// 2.无失败的情况
let p1 = MyPromise.resolve(1);
let p2 = MyPromise.resolve(2);
let p3 = MyPromise.resolve(3);
MyPromise.all([p1, p2, p3])
.then(res => {
console.log(res, 'success'); // [1, 2, 3] "success"
}).catch(err => {
console.log(err, 'err');
})를 반환합니다static race(promiseList) {
return new MyPromise((resolve, reject) => {
promiseList.forEach(item => {
if(!(item instanceof MyPromise)) return;
item.then(result => {
resolve(result);
}).catch(err => {
reject(err)
})
})
})
}
复制代码验证
// 1.
let p1 = MyPromise.resolve(1);
let p2 = MyPromise.reject(2);
let p3 = MyPromise.resolve(3);
MyPromise.race([p1, p2, p3])
.then(res => {
console.log(res); // 1 'success'
}).catch(err => {
console.log(err, 'err');
})
// 2.
let p1 = MyPromise.reject(1);
let p2 = MyPromise.resolve(2);
let p3 = MyPromise.resolve(3);
MyPromise.race([p1, p2, p3])
.then(res => {
console.log(res, 'success');
}).catch(err => {
console.log(err, 'err'); // 1 'err'
})
// 3.
let p1 = MyPromise.reject(1);
let p2 = MyPromise.reject(2);
let p3 = MyPromise.reject(3);
MyPromise.race([p1, p2, p3])
.then(res => {
console.log(res, 'success');
}).catch(err => {
console.log(err, 'err'); // 1 'err'
})
race方法同样接收一个数组参数，里面每一项是Promise实例，它返回最快改变状态的Promise实例方法的结果
static race(promiseList) {
return new MyPromise((resolve, reject) => {
promiseList.forEach(item => {
if(!(item instanceof MyPromise)) return;
item.then(result => {
resolve(result);
}).catch(err => {
reject(err)
})
})
})
}
复制代码验证
// 1.
let p1 = MyPromise.resolve(1);
let p2 = MyPromise.reject(2);
let p3 = MyPromise.resolve(3);
MyPromise.race([p1, p2, p3])
.then(res => {
console.log(res); // 1 'success'
}).catch(err => {
console.log(err, 'err');
})
// 2.
let p1 = MyPromise.reject(1);
let p2 = MyPromise.resolve(2);
let p3 = MyPromise.resolve(3);
MyPromise.race([p1, p2, p3])
.then(res => {
console.log(res, 'success');
}).catch(err => {
console.log(err, 'err'); // 1 'err'
})
// 3.
let p1 = MyPromise.reject(1);
let p2 = MyPromise.reject(2);
let p3 = MyPromise.reject(3);
MyPromise.race([p1, p2, p3])
.then(res => {
console.log(res, 'success');
}).catch(err => {
console.log(err, 'err'); // 1 'err'
})尝试实现allSettled方法
allSettled方法也是接收数组参数，但是它无论成功或者失败，都会返回
static allSettled(promiseList) {
return new MyPromise((resolve, reject) => {
let results = [];
for(let i = 0; i < promiseList.length; i++) {
let item = promiseList[i];
if(!(item instanceof MyPromise)) return;
item.then(result => {
results[i] = result;
}, reason => {
results[i] = reason;
})
resolve(results);
}
})
}
复制代码验证
// 1.
let p1 = MyPromise.resolve(1);
let p2 = MyPromise.resolve(2);
let p3 = MyPromise.resolve(3);
MyPromise.race([p1, p2, p3])
.then(res => {
console.log(res); // [1, 2, 3] 'success'
}).catch(err => {
console.log(err, 'err');
})
// 2.
let p1 = MyPromise.reject(1);
let p2 = MyPromise.reject(2);
let p3 = MyPromise.reject(3);
MyPromise.race([p1, p2, p3])
.then(res => {
console.log(res, 'success'); // [1, 2, 3] 'success'
}).catch(err => {
console.log(err, 'err');
})
// 3.
let p1 = MyPromise.resolve(1);
let p2 = MyPromise.reject(2);
let p3 = MyPromise.resolve(3);
MyPromise.race([p1, p2, p3])
.then(res => {
console.log(res, 'success'); // [1, 2, 3] 'success'
}).catch(err => {
console.log(err, 'err');
})推荐教程：《JS教程》
위 내용은 Promise를 구현하기 위해 손으로 작성한 JS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!