TIL - 프로미스와 메서드 (1)

오늘도 실습을 하면서 엄청 깨졌다. 프로미스의 개념은 알아도 문법 사용이 정립이 되어있지를 않으니 일단은 내가 쓸 수 있고 알아볼 수 있는 코드로 쓰는 연습을 하자.

 

---

 

 // - returnHello() -> "Hello"를 resolve하는 Promise를 반환하세요.
 
  //@returns {Promise<string>}
 

// TODO: returnHello 함수를 작성하세요.
function returnHello() {
  return new Promise((resolve) => {
    resolve("Hello");
  });
}

 

위의 문제를 풀면서 어떤 식으로 프로미스를 쓸 것인지 갈팡질팡 했다. 일단 Promise라는 생성자를 통해서 비동기 작업을 통해 프로미스를 받고있다. 성공하면 resolve, 실패 시에는 reject 매개변수를 통하여 결과값을 반환한다. 위에서처럼 성공 시에 "Hello"라는 결과를 반환한다.

 

위에서는 returnHello()라는 함수로 작성하였으므로 함수 호출시에는 then 메서드를 이용하여 후속 작업을 이어갈 수 있다.

 

function returnHello() {
  return new Promise((resolve) => {
    resolve("Hello");
  });
}

returnHello().then((result) => {
  console.log(result);
});

returnHello 함수는 프로미스 객체를 반환한다. 프로미스가 성공했을 때 위와 같은 코드를 통해 출력을 할 수 있다.

 

2번째 문제는 다음과 같다.

/**
 * Q: await/async로 fetchUsers 함수 사용하기
 *
 * - getUsers 함수를 작성하여 fetchUsers 함수를 사용하세요.
 * - then 이 아닌 async/await 문법을 사용하여 사용하세요.
 * - getUsers 함수는 fetchUsers 함수를 사용하여 사용자 목록을 받아온 뒤 사용자의 이름만을 가진 배열을 반환해야 합니다.
 *
 * @returns {Promise<{id:number, name:string}[]>}
 */

// fetchUsers 함수를 수정하지 마세요.
async function fetchUsers() {
  return new Promise((resolve) => {
    const mockData = [
      { id: 1, name: "Alice" },
      { id: 2, name: "Bob" },
    ];
    resolve(mockData);
  });
}

// TODO: getUsers 함수를 작성하세요.
async function getUsers() {
  const data = await fetchUsers((resolve) => resolve);

  //console.log(data);
  let userName = [];
  for (let i = 0; i < data.length; i++) {
    userName.push(data[i].name);
  }
  return userName;
  // for(let i=0;i<data.length;i++)
}

 

async가 선언된 2개의 함수가 있고 getUsers 함수내에서 fetchUsers를 호출하여 데이터를 얻어와 name 속성을 담은 배열을 반환해야한다.

당연히 await 선언을 통해 함수를 얻어오고 resolve를 통해 성공 시의 프로미스 결과를 사용할 것이다. 위는 내가 쓴 것이고 아래는 map 메서드를 사용한 경우이다.

 

async function fetchUsers() {
  return new Promise((resolve) => {
    const mockData = [
      { id: 1, name: "Alice" },
      { id: 2, name: "Bob" },
    ];
    resolve(mockData);
  });
}

async function getUsers() {
  const data = await fetchUsers();
  let userName = [];

  userName = data.map(({ name }) => name);
  console.log(userName);
  return userName;
}

 

fetchUsers를 단순히 사용하기만 했다. 이후에는 data 변수에 할당한 프로미스를 다룬다는 점에서 이 코드가 좀 더 간단한 것 같다.
그러나 이 코드에서도 조금 걸리는 부분은 프로미스의 성공 여부를 무엇으로 판단하는지 궁금해졌다. 

await는 프로미스가 성공 상태일 때 반환 값을 받는다. 따라서 await를 fetchUsers 함수 호출 앞에 선언하였으므로 성공했을때의 데이터를 받는다. 습관이 되어있지는 않지만 try...catch를 통해 프로미스 반환 성공 여부에 따른 것도 코드에 적는 것이 나을 것 같다.