동기(Synchronous)와 비동기(Asynchronous) 처리방식
- 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다.
즉, A작업이 모두 진행 될때까지 B작업은 대기해야한다. - 비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행 할 수 있다.
즉, A작업이 시작하면 동시에 B작업이 실행된다. A작업은 결과값이 나오는대로 출력된다.
동기(synchronous)
동기는 데이터의 요청과 결과가 한 자리에서 동시에 일어나는것을 말한다.
- 요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 요청한 순서대로 결과가 주어져야 한다.
- 데이터 요청에 따른 응답을 리턴해주기 전까지 다른 활동을 할 수 없으며 기다려야한다.
- 순서에 맞게 진행되는 장점이 있으나, 여러가지 요청을 동시에 처리할 수 없다.
| 동기 처리방식의 장단점 |
|
| 장점 | 설계가 매우 간단하고 직관적 |
| 단점 | 결과가 리턴 될 때까지 다른 활동을 할 수 없고 대기해야 함 |
비동기(Asynchronous)
비동기는 데이터의 요청과 결과가 동시에 일어나지 않는다.
- 요청과 결과가 동시에 일어나지 않는다.
- 하나의 요청에 따른 응답을 바로 하지 않아도, 그 대기시간 동안 또 다른 요청에 대한 처리를 할 수 있다.
- 여러 개의 요청을 동시에 할 수 있다는 장점이 있으나, 동기 방식보다 속도가 떨어질 수 있다.
| 비동기 처리방식의 장단점 |
|
| 장점 | 요청에 따른 결과가 반환되는 시간 동안 다른 작업을 수행 할 수 있음 |
| 단점 | 동기식보다 설계가 복잡함 |
비동기처리 문법
async & await
async & await는 ES8문법으로서 가장 최근에 나온 문법이다.
콜백함수 와 promise 의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성하게 도와준다.
async & await 는 promise를 기반으로 하고있다.
모든 async함수는 promise를 리턴하고, 모든 await 함수는 일반적으로 promise가 된다.
기본문법
async function 함수명() {
await 비동기처리_메소드명();
}함수 앞에 async 를 붙이고, 호출할 비동기 함수(즉, promise) 앞에 await 키워드를 붙인다.
함수 앞에 async 가 선언 되어야만 await 를 사용할 수 있다.
- async async는 function앞에 위치한다.
- function앞에 async를 붙이면 해당 함수는 항상 promise를 반환한다.
- await를 만나면 promise가 처리될 때 까지 기다린다. 결과는 그 이후에 변환된다.
- 일반 함수에는 사용할 수 없다. async함수가 아닌데 await를 사용할 경우 문법 에러가 발생한다.
기본적인 사용법
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function process() {
console.log('안녕하세요!');
await sleep(1000); // 1초쉬고
console.log('반갑습니다!');
}
process();예외처리
async & await 에서 예외를 처리하는 방법은 바로 try-catch문이다.
promise에서 에러처리를 위해 .catch() 를 사용했던 것처럼 async에서는 catch {} 를 사용하면 된다.
async function logTodoTitle() {
try {
var user = await fetchUser();
if (user.id === 1) {
var todo = await fetchTodo();
console.log(todo.title); // delectus aut autem
}
} catch (error) {
console.log(error);
}
}Promise
Promise는 자바스크립트에서 비동기 작업을 좀 더 편리하게 처리 할 수 있도록 ES6에 도입된 기능이다.
const promise = new Promise((resolve, reject) => {
//executor 실행자, 실행 함수..
});resolve 는 new Promise가 만들어 질때 자동으로 실행된다.
executor의 인수 resolve reject 는 자바스크립트가 자체적으로 제공하는 콜백이다.
- resolve : 작업이 성공적으로 끝난 경우, 그 결과를 나타내는 value와 함께 호출한다.
- reject : 에러 발생 시 에러 객체를 나타내는 error와 함께 호출한다.
- executor : 자동으로 실행, 처리가 끝나면 성공 여부에 따라 resolve나 reject를 호출한다.
Promise의 3가지 상태(states)
프로미스는 3가지의 상태(states)를 가지며, 여기서 상태란 프로미스의 처리 과정을 의미한다.
new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 가진다.
- Pending : 비동기 처리 로직이 아직 완료되지 않은 상태 (대기)
- Fulfilled : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 (성공)
- Rejected : 비동기 처리가 실패하거나 오류가 발생한 상태(실패)
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
}, 1000);
});
myPromise.then(n => {
console.log(n);
});작업이 끝나고 또 다른 작업을 하고자 할때, .then(...)을 붙어서 사용하면 된다.
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error());
}, 1000);
});
myPromise
.then(n => {
console.log(n);
})
.catch(error => {
console.log(error);
});성공하면 .then()메소드가 실행되고, 실패하면 reject를 사용하고, error는.catch()메소드를 사용해서 처리한다.
