[ES6] 비동기 완전쉽게 풀이

콜백지옥과 async / await를 공부하고 있는데 대부분 다 똑같은 예시의 글 또는 settimeout을 이용해 console을 찍는 원리적인 예시뿐이다, 이런 예시는 훌륭하나, promise나 async에
접목 시키기엔 공부하는 입장에선 설명이 많이 부족한거같다

지금까지 본 대부분의 비동기 예시

function callHello() {
  let value;
  
  console.log("1초만기다려");
  console.log('거의다옴ㅋ');
  
 const async = setTimeout(() => {
    value = "Hello";
  }, 1000); 
  //그림에서 설명하기 쉬우라고 변수안에 setTimeout을 넣었는데 원랜 안넣음
  
  return value;
}

function printString(결과값) {
  console.log(결과값);
}

const result = callHello();
printString(result);

의도한 순서

console.log("1초만기다려");
console.log('거의다옴ㅋ');
return hello

결과

1초만기다려
거의다옴ㅋ
undefined

왜이런지 따져보면, 결과값을 콘솔 찍는 printString(result)를 실행 시켰을 때 result 안에 있는
callHello()함수가 실행되는데 이때 동기와 비동기가 섞이면 이렇게 됨

예시 사진

이렇게 3번 뛰어넘고 4번 → 5번 → 3번 순으로 실행하니 undefined가 뜸

👨‍🎓 그럼 의도한대로 할려면?

콜백함수 또는 Promise 또는 async/await을 쓰면 됨

콜백함수로 한다면?

function callHello() {
  let value;

  console.log("1초만기다려");
  console.log("거의다옴ㅋ");

  setTimeout(() => {
    value = "Hello";
    printString(value);
  }, 1000);
}

function printString(결과값) {
  console.log(결과값);
}

callHello();

콜백함수를 모른다면 그냥 document.addeventlistener("click",function()) 이거임 함수안에 함수

🙋‍♂️ Promise가 뭔데?

그냥 약속임 대기,성공,실패가 있는 약속. 기본문법 보여줌

var promise = new Promise(function(resolve,reject){
							//성공,실패 (대기는 나중에나옴)
  var 연산 = 1+1
  resolve(연산)
})
  promise.then((결과)=>{
   console.log(결과)
  })
  
//결과 2

✍이걸 아까 코드로 대입해보면

let value;

var promise = new Promise(function (resolve, reject) {
  console.log("1초만기다려");
  console.log("거의다옴ㅋ");
  
  setTimeout(() => {
    value = "Hello";
    resolve(value);
  }, 1000);
});

promise.then((결과) => {
  console.log(결과);
});

결과

1초만기다려
거의다옴ㅋ
hello

👩‍🎓 Async / Await

주의점 : await을 쓰는 함수가 꼭 promise를 반환해야 작동함

async / await은 그냥 async는 await을 쓰기 위해서 함수 앞에 붙이는거고 await이 의미가 있다

✍ 그래도 async 코드로 고쳐보면

let value;

async function callHello() {
  return new Promise((res, rej) => {
    console.log("1초만기다려");
    console.log("거의다옴ㅋ");
    setTimeout(() => {
      value = "hello";
      res(value);
    }, 1000);
  });
}

const printString = async () => {
  let result = await callHello();
  console.log(result);
};

printString();

만약 async문에서 let result = await callHello(); 중 await을 뺀다면 promise pending(대기)상태가 됨 그래서 await을 붙여야함

근데 사실 async / await은 저럴 때 안쓰고 보통 HTTP 통신에서 데이터를 받아올 때 씀 ajax나 axios 같은 get 할 수 있는 함수들

async 실용사례

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

const Asynchronous = async () => {
  let user = await fetchUser();
  console.log(user);
};

Asynchronous();

async 실용사례2

async function fetchData(){
 let list = await getUserList();
}

function getUserList(){
 return new Promise(function(resolve,reject){
  let userList = ["1"."2"."3"]
  resolve(userList)
 })
}

async 실용사례3

loginUser() {
 axios.get("url").then((resolve){
  if(resolve.data.id === 1) {
   axios.get("url").then((responce){
     this.variable = responce.data; 
    })
   } 
 })
}

↓

async loginUserAsync() {
 let resolve = await axios.get("url") 
 if(resolve.data.id === 1) {
   let responce = await axios.get("url")
   this.variable = responce.data
  }
}

//이렇게 바뀜

// .then((resolve)가 let resolve = 으로 바뀜