👍 async await 직렬 / 병렬 + fetch 적용 (비동기)

1. 비동기 간단 예시

Case1) 병렬 (각자 진행)

function a(){
  return new Promise(resolve=>{
    console.log('1');
    setTimeout(()=>{console.log('first setTimeout');},1000)
    resolve(1);
  })
}

function b(){
  return new Promise(resolve=>{
    console.log('2');
    setTimeout(()=>{console.log('second setTimeout');},1000);
    resolve(2);
  })
}

async function c(){
  const aa = await a();
  const bb = await b();
  return aa+bb;
}

c().then(console.log)

---

Case1) 결과

1. a()함수가 실행되면서 1이 출력되고
2. setTimeout에 의해 1초뒤 first setTimeout이 출력될 예정이고
3. resolve로 인해 바로 aa로 반환이된다.
4. b()함수가 실행되면서 2가 출력되고
5. setTimeout에 의해 1초뒤 second setTimeout이 출력될 예정이고
6. resolve로 인해 바로 bb가 반환되고 aa+bb가 반환된 3이 출력된다.
7. 1초뒤 각각의 setTimeout에 의해 first setTimeout과 second setTimeout이 출력된다.

1				//바로
2				//바로
3				//바로
first setTimeout		//1초 뒤		
second setTimeout		//1초 뒤

---

Case2) 직렬(서로 영향받아 진행)

function a(){
  return new Promise(resolve=>{
    console.log('1');
    setTimeout(()=>{console.log('first setTimeout'); resolve(1);},1000)
  })
}

function b(){
  return new Promise(resolve=>{
    console.log('2');
    setTimeout(()=>{console.log('second setTimeout'); resolve(2)},1000)
  })
}

async function c(){
  const aa = await a();
  const bb = await b();
  return aa+bb;
}

c().then(console.log)

---

Case2) 결과

1. a()함수가 실행되면서 1이 출력된다.
2. setTimeout에 의해 first setTimeout이 1초 뒤 출력될 예정인데 resolve(1)이 1초 뒤 이므로 다음 내용을 진행하기까지 1초동안 기다린다.
3. 1초 뒤 first setTimeout을 출력하면서 b()함수가 실행되고 2가 출력된다.
4. 마찬가지로 setTimeout에 의해 second setTimeout이 그다음 1초 뒤 (처음기준 2초 뒤) 출력될 예정이고 resolve(2) 또한 1초 뒤 이므로 다음 내용을 진행하지않고 기다린다.
5. 1초 뒤 second setTimeout을 출력하고 2를 리턴한 bb를 통해 aa+bb를 리턴하고 바로 두 합인 3을 출력한다.

1			//바로
first setTimeout	//1초 뒤
2			//1초 뒤 
second setTimeout	//2초 뒤
3			//2초 뒤

---

2. 비동기 fetch 적용 실전

1) 순차적 진행 (fetch)

async function a(){
  await b();
  console.log(2)
  await c();
  console.log(4)
}

function b(){
  return new Promise(resolve=>{
    fetch(`https://js-todo-list-9ca3a.df.r.appspot.com/api/users`,{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({
        name : `$abc`
      })
    }).then(res=>res.json).then(data=>{
      console.log(1)
      resolve();
    }).catch(err=>console.log(err));

  })
}

function c(){
  return new Promise((resolve)=>{
    fetch(`https://js-todo-list-9ca3a.df.r.appspot.com/api/users`,{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({
      name : `def`
    })
  }).then(res=>res.json).then(data=>{
    console.log(3)
      resolve();
    }).catch(err=>console.log(err));

  })
}



a();

• 결과

Promise {<fulfilled>: undefined}
1
2
3
4

순차적으로 fetch 완료 후 진행을 한다.

---

2) 병렬적 진행 (fetch)

async function a(){
  await b();
  console.log(2)
  await c();
  console.log(4)
}

function b(){
  return new Promise(resolve=>{
    fetch(`https://js-todo-list-9ca3a.df.r.appspot.com/api/users`,{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({
        name : `$abc`
      })
    }).then(res=>res.json).then(data=>{
      console.log(1)
    }).catch(err=>console.log(err));
    resolve();
  })
}

function c(){
  return new Promise((resolve)=>{
    fetch(`https://js-todo-list-9ca3a.df.r.appspot.com/api/users`,{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({
      name : `def`
    })
  }).then(res=>res.json).then(data=>{
    console.log(3)
    }).catch(err=>console.log(err));
    resolve();
  })
}



a();

• 결과

2
4
Promise {<fulfilled>: undefined}
1
3

resolve를 통해 2,4는 먼저 출력되고 시간이 지난 후 (짧은시간)
1,3이 각각 출력된다.

---

정리

우리는 setTimeout에 리턴하는 resolve를 넣냐 안 넣냐에 따라
각각의 await이 같은 시간에 같이 실행되어 같이 출력될 수도 있고 다른 await을 기다린 후에 다음 await을 실행 할 수도 있다.

async를 통해 리턴한 값은 Promise이므로 then을 통해 확인 가능하다.