콜백함수 개념
- 콜백 함수는 다른 함수에 매개변수로 전달되는 함수이며, 특정 조건이 만족될 때 호출
- 콜백 함수는 다른 함수의 매개변수로 전달되어, 해당 함수 내부에서 호출되는 함수
- 일반적으로 비동기 작업이나 특정 이벤트가 발생할 때 실행
즉, 콜백함수는 함수1,함수2 있다고 가정 했을때 함수1 매개변수가 함수2 인자로 전달 될 때 실행되는 함수
function fetchData(callback) {
setTimeout(() => {
callback("Data loaded!");// 비동기 작업이 끝나면 콜백 함수 호출
}, 1000);//1초 후에 작업수행
}
fetchData((data) => {
console.log(data); // 1초 후 "Data loaded!" 출력
});Promise
Promise는 es6부터 자바스크립트 내장객체로 추가 되었음.
생성자를 통해서 프로미스 객체를 만들 수 있고, 생성자의 인자로 executor 라는 함수를 이용
new Promise((resolve, reject) => {
// 비동기 작업을 여기서 수행합니다.
});
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data loaded!");
}, 1000);
});
}
fetchData().then(data => {
console.log(data); // 1초 후 "Data loaded!" 출력
}).catch(error => {
console.error(error);
});executor 함수
Promise 객체를 생성할 때 전달하는 함수로, 비동기 작업의 실행 로직을 정의하는 부분.
이 함수는 Promise가 생성될 때 즉시 실행되며,
두 개의 매개변수를 받는다: resolve와 reject.
resolve와 reject 함수는 Promise 생성자 내부에서 자동으로 생성되어 executor 함수의 매개변수로 전달
executor 함수의 매개변수
resolve: 비동기 작업이 성공했을 때 호출하는 함수. Promise가 "fulfilled" 상태로 변경
reject: 비동기 작업이 실패했을 때 호출하는 함수. Promise가 "rejected" 상태로 변경
new Promise((resolve, reject)=>{}) // 이 상태는 pending(대기상태)const promiseExam = new Promise((resovle, reject)=>{
setTimeout(()=>{
resolve(); // fulfilled 상태
},1000);
});
//콜백함수 (Promise가 이행된 후 발생 시 자동으로 호출되기 때문)
promiseExam.then()=>{
console.log('1000ms 후에 fulfilled');
}
/*promiseExam 함수가 호출될 때, Promise객체가 만들어지면서 리턴되는
함수의 실행과, 동시에 프로미스 객체를 만들면서 pending이 시작하도록 하기 위해
타이밍을 적절히 지정하기 위해서 사용
*/
function promiseExam(){
return new Promise((resolve, reject) => {
setTimeout(()=>{
resolve();
}, 1000);
});
}
promiseExam().then( () => {
console.log('1000ms 후에 fuifilled 됨');
});
값넣어서 값 출력하고싶을때,
new Error로 넣으면 에러메시지 콘솔에 출력, resolve처럼 문자열도 가능
function promiseExam() {
return new Promise((resolve, reject) => {
setTimeout(() => {
//resolve("성공완료 ! ")
reject(new Error('실패'));// reject, 부분은 catch()로 이동
}, 1000);
});
}
promiseExam().then((message) => {
console.log('1000ms에 후에 fulfilled 됩니다.', message);
}).catch((error) => {
console.log('1000ms에 후에 rejected 됩니다.', error);
}).finally(() => {
console.log("end")
})
Async - Await
Promise는 객체이고, Async는 함수, 둘다 비동기 작업이랑 연관 되어있다.
Promise를 더 직관적으로 다루기 위한 문법
async 키워드가 함수 앞에 붙으면 해당 함수는
항상 Promise를 반환하고,
await 키워드를 통해 비동기 작업의 완료를 기다릴 수 있다.
async function fetchData() {
return "Data loaded!";
}
async function getData() {
try {
const data = await fetchData();
console.log(data); // "Data loaded!" 출력
} catch (error) {
console.error(error);
}
}
getData();
기록하기