简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

Promise를 구현하기 위해 손으로 작성한 JS

Guanhui
풀어 주다： 2020-05-07 09:27:21
앞으로
2778명이 탐색했습니다.

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, &#39;err&#39;);     // 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, &#39;success&#39;);   // [1, 2, 3] "success"
    }).catch(err => {
        console.log(err, &#39;err&#39;);
    })
로그인 후 복사

를 반환합니다

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 &#39;success&#39;
    }).catch(err => {
        console.log(err, &#39;err&#39;);    
    })
// 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, &#39;success&#39;);   
    }).catch(err => {
        console.log(err, &#39;err&#39;);       // 1 &#39;err&#39;
    })
    
// 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, &#39;success&#39;);   
    }).catch(err => {
        console.log(err, &#39;err&#39;);       // 1 &#39;err&#39;
    })
로그인 후 복사
로그인 후 복사

race 메서드🎜🎜.

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 &#39;success&#39;
    }).catch(err => {
        console.log(err, &#39;err&#39;);    
    })
// 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, &#39;success&#39;);   
    }).catch(err => {
        console.log(err, &#39;err&#39;);       // 1 &#39;err&#39;
    })
    
// 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, &#39;success&#39;);   
    }).catch(err => {
        console.log(err, &#39;err&#39;);       // 1 &#39;err&#39;
    })
로그인 후 복사
로그인 후 복사

尝试实现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] &#39;success&#39;
    }).catch(err => {
        console.log(err, &#39;err&#39;);    
    })
// 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, &#39;success&#39;);   // [1, 2, 3] &#39;success&#39;
    }).catch(err => {
        console.log(err, &#39;err&#39;);       
    })
    
// 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, &#39;success&#39;);   // [1, 2, 3] &#39;success&#39;
    }).catch(err => {
        console.log(err, &#39;err&#39;);       
    })
로그인 후 복사

推荐教程：《JS教程》

위 내용은 Promise를 구현하기 위해 손으로 작성한 JS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
js promise
원천：juejin.im
이전 기사：AJAX 및 AJAX 교차 도메인이 무엇인지 파악하는 데 도움이 되는 한 단계 다음 기사：자바스크립트는 현재 날짜를 가져옵니다
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
여러 경로에 선언된 작업자 풀이 임계값을 고려하지 않고 여전히 CPU 사용량을 유지할 수 있습니까? CPU 집약적인 작업을 처리하기 위해 작업자 풀이 있는 node.js 시스템을 찾고 있지만 여러 경로에서의 CPU 사용량에 대해 약간 혼란스럽습니다. 시나리오는 ...
에서 2024-04-06 19:54:23
0
1
444
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
숨겨진 측면 패널 표시: 선택됨 애니메이션 햄버거 메뉴를 통해 보기로 전환할 수 있는 탐색 메뉴를 측면 패널에 갖고 싶습니다. JS 없이 CSS만 사용하여 만들고 싶습니다. :checked 의사...
에서 2024-04-06 15:49:33
0
1
319
Nuxt.js로 생성된 대시보드를 배포하기 위해 SSG를 사용해야 합니까? Nuxt.js를 사용하여 내부용 대시보드를 개발하겠습니다. 내부 대시보드이므로 범용 스키마가 필요하지 않습니다. 일반적으로 대부분의 대시보드는 SPA에서 개발됩니...
에서 2024-04-06 13:17:44
0
1
493
Electron은 사전 로드 시 AppData를 가져옵니다. 사전 로드된 AppData 디렉터리를 얻는 방법은 무엇입니까? Background.js[...]asyncfunctioncreateWindow(){constwin=...
에서 2024-04-06 11:05:31
0
1
417
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！