JavaScript 프라미스, async와 await

*프라미스 :

예를 들어 가수가 있을 때 가수가 앨범을 발매하려하는데 팬들은 밤이고 낮이고 앨범이 언제나오는지 물어본다고 가정합니다. 이러한 상황에서 팬들이 가수에 관한 소직들을 자동으로 받아볼 수 있도록 해 가수의 부하를 덜어주고 싶습니다. 방법은 구독리스트를 만들어 팬들에게 이메일주소를 적게하고, 이메일로 가수 관련 소식들을 바로 받아볼 수 있도록 하는 것입니다.

제작코드(producing code)는 원격에서 스크립트를 불러오는 것 같은 시간 걸리는 일을 합니다. 위 예시에서는 가수가 제작코드에 해당됩니다.

소비코드(consuming code)는 제작코드의 결과를 기다렸다가 이를 소비합니다. 소비주체(함수)는 여럿이 될 수 있습니다.

위 예시에서는 팬에 해당됩니다.

프로미스(promise)는 제작코드와 소비코드를 연결해주는 자바스크립트 객체입니다. 위 예시에서는 구독리스트가 해당 됩니다. 프로미스는 시간이 얼마나 걸리든 상관없이 약속한 결과를 만들어 내는 제작코드가 준비됬을때, 모든 소비코드가 결과를 사용할 수 있도록 해줍니다.

let promise = new Promise(function(resolve, reject) {
  // executor (제작 코드, '가수')
});

new Promise에 전달되는 함수는 executor(실행함수)라 합니다. excutor는 new Promise가 만들어질 때 자동으로 실행되는데, 결과를 최종적으로 만들어내는 제작코드를 포함합니다. 위 예시에서 가수가 executor입니다.

개발자는 resolve와 reject를 신경쓰지 않고 excutor안 코드만 작성하면 됩니다.

excutor에선 결과를 즉시 얻든 늦게 얻든 상관없이 상황에 따라 인수로 넘겨준 콜백 중 하나를 반드시 호출해야합니다.

resolve(value) : 일이 성공적으로 끝난 경우 결과를 나타내는 value와 함께 호출

reject(error): 에러발생 시 에러객체를 나타내는 error와 함께 호출

excutor는 자동으로 실행되는데 여기서 원하는 일이 처리됩니다. 처리가 끝나면 excutor는 처리 성공여부에 따라 resolve나 reject를 호출합니다.

 

 

 

*async와 await

async와 await를 사용하면 프라미스를 좀 더 편하게 사용할 수 있습니다.

--async

async function f() {
	return 1;
 }

위에 처럼 function앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환합니다.프라미스가 아닌값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 합니다.

async function f() {
  return 1;
}

f().then(alert); // 1

async function f() {
  return Promise.resolve(1);
}

f().then(alert); // 1

async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌것은 프라미스로 감싸 반환합니다. 

그래서 위  2개 예시의 결과가 같은것 입니다.

 

--await

js에서 await을 만나면 프라미스가 처리될 때 까지 기다린다는 의미입니다. 그이후 결과를 반환합니다.

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

함수 본문이 실행되는 도중에 (*)로 표시된 부분에서 잠시 중단되었다가 프라미스가 처리되면 실행이 재개됩니다.

따라서 위 예시의 결과는 1초뒤에 완료가 출력됩니다.

 

await은 async함수 안에서만 동작합니다.

await은 최상위 레밸코드에서 작동하지 않습니다.

ex)
let re = await fetch("ac/bc/cc");

 

프로미스가 정상적으로 동작되면 await promise는 프라미스 result에 저장된 값을 반환합니다. 반면, 프라미스가 거부되면 마치 throws문을 작성한 것처럼 에러가 던져집니다.

async function f() {

  try {
    let response = await fetch('http://유효하지-않은-주소');
  } catch(err) {
    alert(err); // TypeError: failed to fetch
  }
}

f();

const getMenuList = async () => {
    try{
        const url = "/system/menu/menuList";
        const result = await axiosPost(url, {});
        setMenuList(result);
    }
    catch(error){
        console.log(error);
    }
}

 

 

 

 

 

출처: https://ko.javascript.info/

모던 JavaScript 튜토리얼