Javascript 기초 :: 비동기처리, Promise - async / await

Javascript 기초 :: 비동기처리, Promise - async / await

출처 : https://learnjs.vlpt.us/async/

function work() { const start = Date.now(); for (let i = 0; i < 1000000000; i++) {} const end = Date.now(); console.log(end - start + "ms"); //1000ms = 1초 } work(); console.log("다음작업"); // 이 작업이 진행되고 있는 동안 다른 작업을 하고 싶다면 // 비동기 형태로 변경해줘야하는데 그럴땐 setTimeout()라는 함수 사용 function work(callback) { setTimeout(() => { const start = Date.now(); for (let i = 0; i < 1000000000; i++) {} const end = Date.now(); console.log(end - start + 'ms'); callback(); }, 0); } console.log('작업 시작!'); work(() => { console.log('작업이 끝났어요!') console.log( ms + 'ms걸렸다고 해요.') }); console.log('다음 작업'); >> 작업시작! -> 다음작업 -> 502ms -> 작업이 끝났어요 -> 502ms 걸렸다고해요

다음과 같은 작업들은 주로 비동기적으로 처리하게 됩니다.

Ajax Web API 요청 : 만약 서버쪽에서 데이터를 받와아야 할 때는, 요청을 하고 서버에서 응답을 할 때 까지 대기를 해야 되기 때문에 작업을 비동기적으로 처리합니다.

: 만약 서버쪽에서 데이터를 받와아야 할 때는, 요청을 하고 서버에서 응답을 할 때 까지 대기를 해야 되기 때문에 작업을 비동기적으로 처리합니다. 파일 읽기 : 주로 서버 쪽에서 파일을 읽어야 하는 상황에는 비동기적으로 처리합니다.

: 주로 서버 쪽에서 파일을 읽어야 하는 상황에는 비동기적으로 처리합니다. 암호화/복호화 : 암호화/복호화를 할 때에도 바로 처리가 되지 않고, 시간이 어느정도 걸리는 경우가 있기 때문에 비동기적으로 처리합니다.

: 암호화/복호화를 할 때에도 바로 처리가 되지 않고, 시간이 어느정도 걸리는 경우가 있기 때문에 비동기적으로 처리합니다. 작업 예약: 단순히 어떤 작업을 몇초 후에 스케쥴링 해야 하는 상황에는, setTimeout 을 사용하여 비동기적으로 처리합니다.

Promise : 비동기 작업을 조금 더 편하게 할 수 있도록 만들어주는 함수

callback함수를 사용할 경우 비동기 작업이 많아질 경우에는 코드가 난잡해져서 생긴 promise

더보기 //callback지옥.. function increaseAndPrint(n, callback) { setTimeout(() => { const increased = n + 1; console.log(increased); if (callback) { callback(increased); } }, 1000); } increaseAndPrint(0, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { console.log('끝!'); }); }); }); }); });

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

성공할때는 resolve, 실패할때는 reject를 사용하면 됨.

function increaseAndPrint(n) { return new Promise((resolve, reject) => { setTimeout(() => { const value = n + 1; if (value === 5) { const error = new Error(); error.name = 'ValueIsFiveError'; reject(error); return; } console.log(value); resolve(value); }, 1000); }); } increaseAndPrint(0) .then(increaseAndPrint) .then(increaseAndPrint) .then(increaseAndPrint) .then(increaseAndPrint) .then(increaseAndPrint) .catch(e => { console.error(e); });

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();

from http://hisolxx.tistory.com/23 by ccl(A) rewrite - 2021-12-20 02:02:04