1.1 콜백 함수
콜백 함수: 함수 A를 매개변수로 전달하여 다른 함수 B를 호출하면 A가 콜백 함수가 됩니다. [추천: JavaScript 비디오 튜토리얼]
콜백이라는 이름의 몇 가지 예
function 당신은 몇 마리의 개를 가지고 있습니까(fn){
fn('개')
}함수 개 수(개수){
console.log(수량)
}
개는 몇 마리 있습니까? (개 수를 세어보세요) // 개 한 마리익명 콜백
function 당신은 몇 마리의 개를 가지고 있습니까(fn){
fn('개')
}
개는 몇 마리 있습니까? (function(number){console.log(number)
}) // 개 일반적인 예
콜백 함수는 jQuery에서 사용되며 여기서는 익명 콜백이 사용됩니다.
$("#btn").click(함수(){
console.log('나를 클릭하세요')
})1.2 콜백 지옥 (콜백 단점 1)
콜백 지옥: 콜백이 너무 많이 중첩되어 코드를 이해하기 어렵게 만드는 상황을 말합니다.
let info = []function 개는 몇 마리 있습니까(fn){
fn('개')
}function 고양이는 몇 마리 있나요(fn){
fn('고양이')
}함수는 알고 있습니다(수량,콜백){
info.push(수량)
console.log(정보) if(콜백){
콜백()
}
}//호출을 시작합니다. 이보다 몇 개의 레이어가 더 있으면 개 수를 파악하기 어려울 것입니다(함수(개 수){
console.log(개수)
알았어(개수, 함수(){
고양이는 몇 마리 있습니까?(함수(고양이 수){
console.log(고양이 수)
알겠습니다(고양이 수)
})
})
})1.3 Promise를 사용하지 않고 문제를 해결하는 방법
익명 함수 대신 명명된 함수 사용
let info = []function 개는 몇 마리 있습니까(fn){
fn('개')
}function 고양이는 몇 마리 있나요(fn){
fn('고양이')
}함수는 알고 있습니다(수량,콜백){
info.push(수량)
console.log(정보) if(콜백){
콜백()
}
}함수는 고양이의 수(고양이의 수)를 알려줍니다.{
console.log(고양이 수)
알겠습니다(고양이 수)
}함수 계속 계산(){
고양이는 몇 마리 있나요? (고양이의 수를 알려주세요)
}함수는 개의 수(개 수)를 알려줍니다.{
console.log(개수)
알겠습니다(개 수, 계속 세어 보세요)
}
개는 몇 마리 있나요? (개 수를 말해주세요) // 별로 나아진 것 같지 않습니다. . .1.4 콜백 메소드가 다르므로 별도로 기억해야 함(콜백 단점 2)
readFile('C:\1.txt',function (error, data) { // node.js의 콜백 파일 읽기 메소드 if(error) {
console.log('성공')
console.log(data.toString())
} 또 다른 {
console.log('파일 읽기 실패')
}
})
$.ajax({ //jQuery의 ajax 메소드에 있는 콜백 url:'/2.txt'
성공: 함수(응답) {
console.log('성공')
},
오류: 함수(){
console.log('실패')
}
})Promise는 콜백 및 이벤트와 같은 기존 솔루션보다 더 합리적이고 강력한 비동기 프로그래밍 솔루션입니다. ES6는 이를 언어 표준에 작성하고 사용법을 통일했으며 기본적으로 Promise 객체를 제공했습니다.
3.1 구현 원칙
ES6에서는 Promise 객체가 Promise 인스턴스를 생성하는 데 사용되는 생성자라고 규정합니다. 함수 내에서 Promise 개체의 인스턴스를 반환하면 다음 단계에서 Promise의 속성과 메서드를 사용할 수 있습니다.
함수 함수 이름(){ return new Promise(함수(해결, 거부) {
// ... 일부 코드 if (/* 비동기 작업 성공 */){
해결(값); // 비동기 작업이 성공하면 호출되고 결과를 매개변수로 전달합니다. } else {
Reject(error); // 비동기 실패가 발생하면 호출되며, 오류를 매개변수로 전달합니다. }
})
}3.2 호출 로직
S1이나 E1 모두 오류를 보고하지 않았습니다. S2를 실행합니다. (실행을 해결하면 시스템은 완료된 것으로 간주하고 오류가 보고되지 않습니다.)
S1 또는 E1이 오류를 보고하면 E2를 실행합니다. (실행을 거부하면 시스템은 실행이 완료되지 않은 것으로 간주하고 오류를 보고합니다.)
마스터 과정에 대한 프런트 엔드(vue) 항목: 학습 항목 입력
4.1 Promise의 속성과 방법
재산
Promise.prototype은 Promise 생성자의 프로토타입 메서드를 나타냅니다.
Promise.prototype.then()
약속을 반환하세요. Promise의 성공 및 실패 콜백 함수라는 최대 두 개의 매개변수가 필요합니다.
Promise.prototype.catch()
Promise를 반환하고 거부를 처리합니다. Promise.prototype.then(정의되지 않음, onRejected)과 동일합니다.
Promise.prototype.finally()
finally() 메서드는 Promise를 반환합니다. then() 및 catch()를 실행한 후 finally에서 지정한 콜백 함수가 실행됩니다. then()과 catch()에서 동일한 문을 한 번 작성해야 하는 상황을 피하세요.
Promise.all(반복 가능)
Promise 인스턴스를 반환합니다. 반복 가능한 매개변수의 모든 Promise가 해결된 후 콜백이 해결을 완료합니다.
Promise.race(반복 가능)
Promise 개체의 반환 값 또는 거부 오류 이유와 함께 Promise를 반환합니다. 단, 반복 가능한 Promise 개체에 "해결" 또는 "거부"가 있는 경우에만 해당됩니다.
약속.해결()
주어진 값으로 해결되는 Promise 객체를 반환합니다. 그러나 이 값이 then 가능한 경우(즉, then 메서드 사용) 반환된 Promise는 Thenable 개체를 "따라" 최종 상태를 채택합니다(수신 값 자체가 다음인 경우 해결/거부/보류/정착됨 참조). Promise 객체인 경우 해당 객체는 Promise.resolve 메서드의 반환 값으로 반환됩니다. 그렇지 않으면 Promise 객체는 이 값을 성공 상태로 반환합니다.
약속.거부()
거부 이유 매개변수와 함께 Promise 객체를 반환합니다.
4.2 콜백 지옥의 예제를 Promise 형식으로 다시 작성
Promise를 사용하면 로직이 매우 직관적이 되고 더욱 완전하게 작성되는 것을 볼 수 있습니다.
Promise가 Promise에 중첩된 경우, 즉 Promise가 체인으로 연결된 경우 - 정보 전송 실패에 주의하십시오. Promise 체인을 사용할 때 각 단계에서 이전 단계의 데이터가 필요한 경우 매개변수를 성공적으로 전달해야 합니다. 매개변수가 실패하면 거부를 통해 매개변수를 전달합니다. 매개변수 전달을 잊어버리면 원하는 결과를 얻을 수 없습니다.
해결은 성공적인 데이터를 다음 콜백으로 반환합니다.
거부는 실패한 데이터를 다음 콜백에 반환합니다.
여기에서 해결하기 위한 매개변수를 전달하고 이를 실패 예시로 변경합니다. 거부할 매개변수를 먼저 전달하지 마십시오. 실패하면 다음 콜백에서 데이터를 가져오지 않습니다.
거부할 매개변수 전달
실패 콜백이 전달되더라도 다음 성공 콜백은 계속 실행되는 것을 볼 수 있는데, 이는 기본적으로 알 수 없음()이 undefine을 반환하므로 성공과 실패를 모두 처리한 것과 동일합니다. 다음 콜백이 구현됩니다.
예상대로 변경합니다. 즉, 실패하면 호출되지 않습니다.
실패 시 전화하지 않음에 대한 약식
위 상황이 실행된 후에는 .then의 성공 콜백(개 제외)이 실행되지 않는지 확인하기 위해 실패 콜백을 추가해 보겠습니다.
후속 성공적인 콜백이 실행될 수 있도록 해결을 반환할 수도 있습니다.
4.3 적용
이미지 로드는 이미지 로드를 Promise로 작성합니다. 로드가 완료되면 Promise 상태가 변경됩니다.
const preloadImage = 함수(경로) {
return new Promise(함수 (해결, 거부) {
const 이미지 = 새로운 이미지();
image.onload = 해결;
image.onerror = 거부;
image.src = 경로;
});
};Generator 함수와 Promise의 조합(자세한 내용은 Ruan Yifeng의 튜토리얼 참조 링크 참조)
5.1 기다립니다
성공적인 사례 
실패할 경우 try catch를 사용하세요.
더 완전한 try catch와 함께 wait를 사용하세요.
Promise 객체를 사용하면 일반 함수를 Promise 반환 형식으로 변경하여 콜백 지옥 문제를 해결할 수 있습니다.
Promise의 성공 및 실패 호출 로직을 이해하고 유연하게 조정할 수 있습니다.
핵심지식을 이해하고, 먼저 활용하고, 천천히 지식을 통합하고 흡수하세요.
위 내용은 ES6 Promise의 원리와 사용법에 대한 예제 분석의 상세 내용입니다!
