동기 : 현재 실행 중인 테스크가 종료될 때 까지 다음 테스크가 대기하는 방식
비동기 : 현재 실행 중인 테스크가 종료되지 않았더라도 다음 테스크를 바로 실행하는 방식
setTimeout(기다린 후 실행시킬 함수(콜백함수), 기다릴 ms, 콜백함수에 넣을 추가 인자)
함수의 매개 변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상
step1(function (value1) {
step2(function (value2) {
step3(function (value3) {
step4(function (value4) {
step5(function (value5) {
step6(function (value6) {
// Do something with value6
});
});
});
});
});
});
함수를 호출할 때 비동기 작업이 시작되며, 함수 호출 시점에 다음 작업(콜백 함수)도 넘겨준다. 이와 같은 현상이 많이 반복되면 콜백지옥에 빠지게 된다.
비동기 작업을 좀 더 편하게 할 수 있도록 ES6에서 도입한 객체로 콜백지옥의 단점을 보완한다.
const promise = new Promise((resolve, reject) => {
resolve();
});
promise
.then(() => {
console.log("성공");
})
.catch(() => {
console.log("실패");
});
// 성공
function startAsync(age) {
return new Promise((resolve, reject) => {
if (age > 20) resolve();
else reject();
});
}
setTimeout(() => {
const promise1 = startAsync(25);
promise1
.then(() => {
console.log("1 then!");
})
.catch(() => {
console.log("1 catch!");
});
const promise2 = startAsync(15);
promise2
.then(() => {
console.log("2.then!");
})
.catch(() => {
console.log("2 catch!");
});
}, 1000);
// 1 then!
// 2 catch!
- pending(대기): 비동기 처리 로직이 완료되지 않은 상태
- fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환한 상태
- rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태
new Promise()
Promise 메서드를 호출하면 pending 상태가 된다. 이 때 콜백함수를 선언할 수 있고, 콜백함수의 인자는 resolve, reject이다.
new Promise(function(resolve, reject){
resolve();
});
resolve를 실행하면 이행 상태가 된다.
function getData(){
return new Promise(function(resolve, reject){
var data = 100;
resolve(data);
});
};
// resolve()의 결과 값 data를 resolveData로 받음
getData().then(function(resolvedData){
console.log(resolvedData); // 100
})
이행 상태가 되면 then()으로 결과 값을 받을 수 있다.
new Promise(function(resolve, reject) => {
reject();
})
reject를 실행하면 실패 상태가 된다.
function getData(){
new Promise(function(resolve, reject){
reject(new Error("Request is failed"));
})
}
getData()
.then()
.catch(function(err){
console.log(err); // Error: Reqeust is failed
})
실패 상태가 되면 catch()로 결과 값을 받을 수 있다.
- async: 비동기 작업을 만드는 손쉬운 방법
- await: Promise가 끝날 때 까지 기다리도록 만드는 방법
function setTimeoutPromise(ms) {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(), ms);
});
}
async function startAsync(age) {
if (age > 20) return `${age} success`;
else throw new Error(`${age} is not over 20`);
}
async function startAsyncJobs() {
await setTimeoutPromise(1000);
const promise1 = startAsync(25);
try {
const value = await promise1;
console.log(value);
} catch (e) {
console.error(e);
}
const promise2 = startAsync(15);
try {
const value = await promise2;
console.log(value);
} catch (e) {
console.error(e);
}
}
startAsyncJobs();
클라이언트와 서버간에 XML 데이터를 주고 받는 기술
XMLHttpRequest보다 더 발전된 API
fetch(url, options)
.then((response) => console.log("response:", response))
.catch((error) => console.log("error:", error));
가장 널리 쓰이는 http 통신 라이브러리
axios({
method: "get", // 통신 방식
url: "www.naver.com", // 서버
})
.then(function(response) {
console.log(response.data)
console.log(response.status)
console.log(response.statusText)
console.log(response.headers)
console.log(response.config)
})
▶ fetch와 axios의 자세한 내용은 이 곳 참고 ◀