비동기처리연습

JSONPlaceholder 에서 제공하는 todos 와 users 를 이용해 아래 사진과 같은 결과물을 만들 것이다.
https://jsonplaceholder.typicode.com/todos

https://jsonplaceholder.typicode.com/users

시도 1 : 어영부영 하긴했는데 내가봐도 이 코드는 나쁜 코드같음

• userList, todoList를 따로 만들필요없음
• fetch를 따로따로 하는게 좋음
• 변수명 알아 볼 수 있게 작성하기 (나만 알아보게 작성ㄴㄴ)
• 왠만하면 함수 중첩해서 쓰지말기 (element요소로 작성해보자)

let userList;
let todoList;

const data = async () => {
  const users = await fetch("https://jsonplaceholder.typicode.com/users");
  userList = await users.json();
  const todos = await fetch("https://jsonplaceholder.typicode.com/todos");
  todoList = await todos.json();
};

const checkList = async () => {
  await data();

  let checking = "<ul>";
  todoList.forEach((todo) => {
    const username = userList.find((user) => user.id === todo.userId).username;
    // console.log(username);
    checking += "<ll>";
    checking += "username :" + username + ", todo title : " + todo.title;
    if (todo.completed) {
      checking += '<input type = "checkbox" checked>';
    } else {
      checking += '<input type = "checkbox">';
    }
    checking += "</li><br>";
  });
  checking += "</ul>";
  document.body.innerHTML = checking;
};
checkList();

시도 2 : 데이터를 가져오는것까지는 성공했는데 요소작성을 못했음

• Promise.all 메서드로 fetch를 병렬적으로 불러와보기 (시간단축)
• Promise.allSettled 메서드 써보기
• element요소 작성해보기

// todos 불러오기
const fetchTodos = () => {
  return fetch('https://jsonplaceholder.typicode.com/todos')
    .then((res) => res.json());
};

// users 불러오기 
const fetchUsers = () => {
  return fetch('https://jsonplaceholder.typicode.com/users')
    .then((res) => res.json());
};

// todos, users 으로 우리가 사용할 todolist item 만들어주기
const todoList = async () => {
  try{
    const users = await fetchUsers();
    const todos = await fetchTodos();
    // console.log(users);
    // console.log(todos);
    const todoListItem = todos.map((todo) => {
      const username = users.find((user) => user.id === todo.userId).username;

      return {
        username : username,
        title : todo.title,
        completed : todo.completed
      };
    });
    console.log(todoListItem);
  } catch (e) {
    console.error(e);
  }
};
todoList();


// 매핑된 데이터를 이용해서 element 그려주기

시도 3 : promise.all은 성공

// todos 불러오기 // users 불러오기
const fetchTodos = () => {
  return fetch("https://jsonplaceholder.typicode.com/todos").then((res) =>
    res.json()
  );
};

const fetchUsers = () => {
  return fetch("https://jsonplaceholder.typicode.com/users").then((res) =>
    res.json()
  );
};


// promise.all 써보기
const fetchMerge = (promise) => Promise.all(promise);

// todos, users 으로 우리가 사용할 todolist item 만들어주기
const todoList = async () => {
  try {
    const[users,todos] = await fetchMerge([fetchUsers(),fetchTodos()]);
    // const users = await fetchUsers();
    // const todos = await fetchTodos();
    // console.log(users);
    // console.log(todos);
    const todoListItem = todos.map((todo) => {
      const username = users.find((user) => user.id === todo.userId).username;

      return {
        username: username,
        title: todo.title,
        completed: todo.completed
      };
    });
    console.log(todoListItem);
  } catch (e) {
    console.error(e);
  }
};
todoList();

// 매핑된 데이터를 이용해서 element 그려주기