async, await

async와 await란?

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법으로써

기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고, 개발자가 읽기 좋은 코드를 작성 할 수 있게 도와줍니다.

 

개발자가 읽기 좋은 코드란??

: 위에서부터 아래로 한 줄씩 차근히 읽어 나가면서 사고하는 것이 편합니다. 그렇게 프로그래밍을 배웠기 때문이죠!

 

읽기 좋은 코드와 async, await의 상관성은??

: 아래와 같은 코드를 구성하는 것이 async, await 문법의 목적입니다.

var user = fetchUser('domain.com/users/1');
if (user.id === 1) {
  console.log(user.name);
}

fetchUser()라는 메소드를 호출하면 앞에서 봤던 코드처럼 사용자 객체를 반환한다고 해보겠습니다.

그리고 여기서 fetchUser() 메소드가 서버에서 사용자 정보를 가져오는 HTTP 통신 코드라고 가정 한다면 위 코드는 async, await 문법이 적용된 형태라고 볼 수 있습니다!

 

async, await를 사용법 (더 많은 방식이 있을 수 있습니다.)

 

1) 미들웨어에서 사용하기

: 미들웨어에서 await, async를 사용 할 때는 return 뒤에 async를 사용 해주고, 서버에 요청 할 API 앞에 await를 사용해서 비동기 통신을 구현 했습니다. 또한 이번 프로젝트에서는 then, catch 대신 try, catch를 사용 했습니다.

const PostWriteFB = (content, imageUrl) => {
  return async function (dispatch, getState, { history }) {
    const request = { content: content, imageUrl: imageUrl };
    const response = await apis.postWrite(request);
    console.log('PostWrtieFB response', response.data.status);

    try {
      console.log('PostWrtieFB try');
      const request = { content: content, imageUrl: imageUrl };
      const response = await apis.postWrite(request);
      console.log('PostWrtieFB response', response.data.status);

      dispatch(addPosts(request));
    } catch (error) {
      console.log('PostWrtieFB error');
    }
  };
};

 

2) 함수에서 사용하기

: 함수에서 사용 할 때는 미들웨어처럼 함수 생성 코드 앞에 사용 해주고 서버에 요청 할 API 앞에 await를 사용해서 비동기 통신을 구현 했습니다.

async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

 

3) 화살표 함수에서 사용하기

: 아래의 사이트를 참고한 결과 화살표 함수에서 async, await를 사용 할 때는 

const upload = async () => {
  if (response.data.status) {
    console.log('가져오기 성공');
  } else {
    console.log('가져오기 실패');
  }
};

http://daplus.net/javascript-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%99%94%EC%82%B4%ED%91%9C-%EA%B8%B0%EB%8A%A5%EC%9D%98-%EA%B5%AC%EB%AC%B8/

[javascript] 비동기 화살표 기능의 구문 - 리뷰나라

 

+ react-async 라이브러리가 있다고 한다! 

https://react.vlpt.us/integrate-api/04-react-async.html

4. react-async 로 요청 상태 관리하기 · GitBook

 

출처

https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await