[React/JS] Async & Await

00. 동기와 비동기

---

• 동기적 : 요청이 끝날 때까지 기다림
• 비동기적 : 요청이 끝날 때까지 기다리지 않고, 동시에 여러 가지 요청을 처리 가능

 

 

01. Async & Await

---

JS는 기본적으로 비동기적입니다.

그래서 서버에 요청하거나 순차적으로 수행되어야 하는 코드는 Async & Await으로 동기적으로 처리하도록 합니다.

/** 동기적 */
  async function sync() {

	/** 첫 번째로 실행될 함수 */
    await f1();

    /** 두 번째로 실행될 함수 */
    await f2();

    /** 세 번째로 실행될 함수 */
    await f3();
    
  }

 

만약 f2는 f1, f3 의 결과와 상관없는 함수일 경우는 비동기적으로 처리해도 상관없기 때문에 아래와 같이 구현합니다.

/** 동기적 */
  async function sync() {

	/** 첫 번째로 실행될 함수 */
    await f1();

    /** 순서 상관 없는 함수 */
    f2();

    /** 세 번째로 실행될 함수 */
    await f3();
    
  }

 

02. await 할 함수 내에 이미 async로 구현된 함수를 호출한다면?

---

이미 함수 자체가 async로 구현되어 있다고 해서, 순서대로 호출되지 않습니다.

한 함수 내에서 순차적으로 수행되어야 하는 함수가 있다면 Async & Await으로 동기적으로 처리하도록 합니다.

/** 동기적 */
async function sync() {

	/** 첫 번째로 실행될 함수 */
    await f1();

    /** 두 번째로 실행될 함수 */
    await f2();

    /** 세 번째로 실행될 함수 */
    await f3();
    
 }
  
async function f2() {

    await f4()
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });

 }
 
 async function f4() {
  try {
    await axios
      .get("api 주소")
      .then((res) => {
        console.log(res);
      });
	...
  } catch (err) {
    console.log(err);
    }
  }
}

 

알랑,,말랑....🌠🌠🌠