비동기처리

• 동기적처리(Synchronous)
• 비동기처리의 이해
• callback 함수
• Promise
• Promise (resolve, reject, then, catch)
• Promise 단점
• async / await

 

 동기적 처리 (Synchronous) 

동기적처리는 작업이 끝날때까지 실행되지 않고 기다리다가 끝나면 순차적으로 실행된다.

(1코드가 끝나면, 2코드가 실행되고, 2코드가 끝나면 3코드가 실행되는...)

 

비동기적처리 (Asynchronous)

동시에 여러가지 코드가 실행될 수 있고, 기다리는 과정에서 다른 함수를 호출 할 수도 있다.

(1코드, 2코드, 3코드가 동시에 실행되는...)

 

비동기처리가 필요할 때 

- Ajax 요청을 해야 할 때 

- 서버쪽에 파일을 읽을 떄

- 암호화/복호화 작업을 할 때 

- 작업 예약을 해야 할 떄 

 

* 비동기적 처리는 setTimeout 을 통해서 할 수 있다.

setTimeout을 사용하면 해당 코드가 백그라운드에서 수행하기 때문에 

기존의 코드의 흐름을 막지 않고, 동시에 다른 작업을 할 수 있다.

 

* setTimeout의 타이머값을 0으로 지정해도 브라우저에서 지정한 최소 값,

4ms 가 있음으로 4ms 이후에 실행된다고 생각해도 된다.  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

// 동기적 코드    function work() {   const start = Date.now();   for (let i = 0; i < 10000000; i++) {}   const end = Date.now();   console.log(end - start + "ms"); }   work(); console.log("다음 작업");   // 19ms  // '다음작업'   ////////////////////////////////////////////////////////////////////////////////////////     // 비동기적 코드 function work() {   setTimeout(() => {     const start = Date.now();     for (let i = 0; i < 10000000; i++) {}     const end = Date.now();     console.log(end - start + "ms");   }, 0); // 4ms 브라우저에서 지정한 최소 값 }   console.log("작업 시작"); work(); console.log("다음 작업");   // '작업 시작' // '다음 작업' // '19ms'

 

 

 콜백함수 

함수가 끝난 뒤에 수행되는 함수

파라미터로 받은 함수를 특정 이벤트가 끝난 뒤에 호출시킨다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

// 콜백함수    function work(callback) {   setTimeout(() => {     const start = Date.now();     for (let i = 0; i < 10000000; i++) {}     const end = Date.now();     console.log(end - start + "ms");     callback(end - start);   }, 0);  }   console.log("작업 시작"); work(ms => {   console.log("작업이 끝났습니다.");   console.log(ms + "ms 걸렸습니다."); }); console.log("다음 작업");   // '작업 시작' // '다음 작업' // 19ms // 작업이 끝났습니다. // 19ms 걸렸습니다.

---

 Promise 

기존에 사용하던 callback패턴의 단점을 보완한 ES6패턴

 

callback 단점 

1. 가독성이 떨어짐

2. 코드 중 에러처리가 곤란함 

 

Promise는 resolve 와 reject 메서드를 사용할 수 있다.

 resolve 는 성공할 때 호출, 

 reject 는 실패했을 때 호출한다.

 

성공 시, 코드가 끝난 후에 실행할 작업을  then 을 통해서 설정할 수 있다.

1 2 3 4 5 6 7 8 9 10 11 12

// resolve & then const myPromise = new Promise((resolve, reject) => {   setTimeout(() => {     resolve("reslut");   }, 1000); });   myPromise.then(result => {   console.log(result); });   // result

에러를 잡아낼 때는 catch 메서드를 통해서 에러를 잡아낼 수 있다.

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// reject & then & catch   const myPromise = new Promise((resolve, reject) => {   setTimeout(() => {     reject(new Error());   }, 1000); });   myPromise   .then(result => {     console.log(result);   })   .catch(e => {     console.error(e);   });     // Error

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

function increa(n) {   return new Promise((resolve, reject) => {     setTimeout(() => {       const value = n + 1;       if (value === 5) {         const error = new Error();         error.name = "valueIsError";         reject(error);         return;       }       console.log(`value ${value}`);       resolve(value);     }, 1000);   }); }   increa(0)   .then(n => {     return increa(n);   })   .then(n => {     return increa(n);   })   .then(n => {     return increa(n);   })   .then(n => {     return increa(n);   })   .catch(e => {     console.error(e);   });   // value 1 // value 2 // value 3 // value 4 // valueIsError

 

 

Promise의 단점 

1. 어떤 부분의 에러가 나는지 알 수 없음

2. 특정 조건에 따라 분기하거나, 특정 값을 공유하고자 할 때 번거로움

그렇기 때문에 사용하는 것이 async, await 문법을 사용한다.

 

 

---

async, await