비동기 Promise & async await 2

https://www.youtube.com/watch?v=1DGAyl4kxhY&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3&index=13 

 

참고 : https://ko.javascript.info/async-await

async와 await

 

async 

- function 앞에 위치

- function 앞에 async가 있으면 항상 프라미스(promise) 반환

 

await

- async 함수 안에서만 동작함

- 프라미스가 처리될 때까지 함수 실행을 기다리게 만듦

- promise.then보다 보다 가독성이 좋고 쓰기 쉬우면서 promise의 result값을 얻을 수 있게 함 

 

 

[예제 1]

//기본 코드 
function loadJson(url) {
  return fetch(url)
    .then(response => {
      if (response.status == 200) {
        return response.json();
      } else {
        throw new Error(response.status);
      }
    })
}

loadJson('no-such-user.json')
  .catch(alert); // Error: 404
  
//promise로 변경
async function loadJson(url) {
 let response = await fetch(url)
      if (response.status == 200) {
        return await response.json();
        return json;
      } 
        throw new Error(response.status);
}

loadJson('no-such-user.json')
  .catch(alert); // Error: 404

 

 

[예제 1-1]

async function wait() {
  await new Promise(resolve => setTimeout(resolve, 1000));

  return 10;
}

function f() {
  // ...코드...
  // async wait()를 호출하고 그 결과인 10을 얻을 때까지 기다리려면 어떻게 해야 할까요?
  // f는 일반 함수이기 때문에 여기선 'await'를 사용할 수 없다는 점에 주의하세요!
}

//정답
async function wait() {
  await new Promise(resolve => setTimeout(resolve, 1000));

  return 10;
}

function f() {
 	wait().then(result => alert(result)) //10
}

 

 

[예제 2]

function delayP(ms) {
  return new Promise((resolve, reject) => {
    //동기부분
    setTimeout(resolve, ms);
    reject(err);
  });
}
//async
async function a() {
  console.log("2"); //동기
  const a = await 1; //await을 then으로 생각, async가 끝나는 건 이 곳(동기)(첫 번째 await전에 끝남)
  //처음 나오는 await이 axios.get이면 Promose.resolve가 아니라 axios.get으로 쓰면 됨
  //나머지는 비동기
  console.log("4") //비동기
  console.log("a", a);
  console.log("hmm");
  await null;
  const b = await Promise.resolve(1);
  console.log("b", b);
  return a+b; //2
}//(비동기)

console.log("1")
a() //then 5개 있다
  .then((result) => {
    console.log(result); //2
  })
  .then((result2) => {
    console.log(result2); //undefined
  });
console.log("3")

//출력결과
//1
//2
//3
//4
//a 1
//hmm
//b 1
//2
//undefined

 

 

[예제 3] 

//async await을 promise로 바꿀 경우(완벽하게 바꾸는 건 아님)

//async await
async function a() {
  const a = await 1; //await을 then으로 생각, async가 끝나는 건 이 곳(동기)(첫 번째 await전에 끝남)
  //처음 나오는 await이 axios.get이면 Promose.resolve가 아니라 axios.get으로 쓰면 됨
  //나머지는 비동기
  console.log("a", a);
  console.log("hmm");
  await null;
  const b = await Promise.resolve(1);
  console.log("b", b);
  return b; 
}//(비동기)

//promise
const a = Promise.resolve(1) //프로미스화
  .then((a) => {
    //await이 붙이면 다 비동기
    //await에서 대입하는 변수를 then안에 적어둠
    //await과 await 사이에 전부를 넣을 것
    console.log("a", a);
    console.log("hmm");
    return null;
  })
  .then(() => {
    //대입한 값이 없으므로 비워둠
    return Promise.resolve(1);
  })
  .then((b) => {
    console.log("b", b);
    return b; //단 a+b를 하면 오류남(정확하게 async await과 promise가 연결된 건 아님)
  }).then((result) => {
    console.log(result);
  })
  .then((result2) => {
    console.log(result2);
  });
  
  
 //결과
 //a 1
 //hmm
 //b 1
 //1
 //undefined