동기 및 비동기(sync, async)

동기 vs 비동기

동기는 프로그램이 순차적으로 진행되지만 비동기는 프로세스들이 끝나는 순서대로 진행된다.
동기식이 특정결과를 받고 다음을 진행함으로 프로그램의 가독성이 있으나 사용자 측면에서보면 특정 프로세스가 오래 걸릴 경우 랙이 걸리는 것처럼 보일 수 있으므로 빨리 처리되는 순서대로 화면에 디스플레이 시킬 수있는 비동기 방식이 선호될 수 도 있다.

동기식(sync)

start > result > end 순으로 진행

import {readFileSync, readFile} from 'fs';
console.log('start');
const buffer : Buffer = readFileSync('./package.json');
console.log('result');
console.log('end');

비동기식(async)

start 다음에 result가 먼저 올수도 있고 end가 먼저 올수도 있다.

console.log('start');
readFile('./package.json', (error: Error, buffer: Buffer) => {
  console.log('result');
});
..........
console.log('end');

비동기에서 Promise 와 async

promise

비동기방식으로 함수를 만들때 아래와 같이 promise를 사용하여 만듦니다.

const readFilePromise = (filename:string): Promise<string> =>
  new Promise<string>((resolve, reject)=>{
    readFile(filename, (error: Error, buffer: Buffer)=>{
    if(error) {
      reject(error)
    } else {
      resolve(buffer.toString())
    }
  })
})

promise 로 정의된 함수를 읽어오는 방식

then catch

readFilePromise
  .then(result => console.log(result))
  .catch(error => console.log(error));

async, await

async는 then catch 를 대체할 수 있는 좋은 방법입니다.
await와 async는 반드시 함께 사용하여야 합니다.

(async () =>{
  const content = await readFilePromise('./package.json')
  console.log('read package.json using Promise and async/await...')
})()

Promise 에 대한 좀더 많은 예제

Chaining Promise

promise
.then(result =>  return a;) // 처음 결과를 받아 처리후 리턴
.then(result =>  return b;) // a 를 받아 처리후 리턴
.then(result =>  return..)
.then(result =>  return..)
.then(result => console.log(result));

특정 시간후에 특정 프로세스를 순차적으로 처리하는 예제

Promise.resolve()
  .then(() => {
    this.delay(10) // 0.01초 delay
  })
  .then(() => {
    // 프로세스 실행
  })
  .then(() => this.delay(500)) // 0.5초 delay
  .then(() => {
    // 프로세스 실행
  })
  .then(() => this.delay(1000)) // 1초 delay
  .then(() => {
    // 프로세스 실행
  })
  .then(() => this.delay(10)) // 0.01초 delay
  .then(() => {
    // 프로세스 실행
  });

  private delay(duration: number) {
    return new Promise((resolve: any) => {
      setTimeout(() => resolve(), duration)
    });
  }

Promise all

const p1 = new Promise(resolve => {})

const p2 = new Promise(resolve => {})

const p3 = new Promise(resolve => {})

const allPromise = Promise.all([p1,p2,p3]);
allPromise.then(values => console.log(values)); // values는 p1, p2, p3의 결과값이 배열로 들어간다.

Type설정 예제

Angular에서 promise 타입을 설정하는 예제입니다.

const numPromise: Promise<number> = new Promise<number> (콜백함수)
const strPromise: Promise<string> = new Promise<string> (콜백함수)
const arrayPromise: Promise<number[]> = new Promise<number[]>(콜백함수)

new Promise<T>((
  resolve: (sucessValue: T) => void, 
  reject: (any) => void) => {
  })

resolve 와 reject

resolve는 성공시 출력값이고 reject는 실패시(에러 발생시) 출력값입니다.

resolve

Promise.resolve(1).then(value => console.log(value)) // 1

Promise.resolve('hoony').then(value=>console.log(value)) // hello

Promise.resolve([4, 5, 6]).then(value=>console.log(value)) // [4 5 6]

Promise.resolve({name: 'hoony', age: 25}).then(value=>console.log(value)) // {name : 'Jack', age:32}

reject

Promise.reject(new Error('error')).catch((err:Error) => console.log('error: ', err.message))

Async / Await

async는 함수명 앞에 정의를 하고 await는 promise객체값 앞에 붙임으로서 sync가 되는 것처럼 처리합니다.

let value = await Promise 객체 혹은 값

await를 사용하기 위해서는 상위 함수가 async 로 처리 되어야 한다.

const hiasync = async()=>{
  await Promise 객체 혹은 값
}

const hi = async ()=>{
  return [1, 2, 3];
}

const asyncReturn = async ()=>{
  const result = await hi()
  console.log('value0:', result)
  return result;
}

asyncReturn().then(value => 
  console.log('value1: ', value))

// try 1
signIn().then((response) => {
});

// try 2
const login = await signIn();

// try 3
const {player_id, player_name} = await signIn();
console.log('player_id >> ', player_id, ', player_name >>', player_name);