async/await

Javascript에 대한 최신 추가 사항은 ECMAScript 2017 JavaScript 에디션의 일부인 async functions 그리고 await 키워드는 ECMAScript2017에 추가되었습니다. 이 기능들은 기본적으로 비동기 코드를 쓰고 Promise를 더 읽기 더 쉽도록 만들어줍니다.

async/await의 기초
async/await 코드는 두 가지 부분으로 나눠져있습니다.

비동기 키워드
먼저 비동기 함수를 async 함수로 만들기 위하여 function()앞에 async 키워드를 추가합니다. async function()은 await 키워드가 비동기 코드를 호출할 수 있게 해주는 함수 입니다.

쉽게 일상생활에 예를 들면 현재 스마트폰 사용하면서 게임다운받을때 동시에 카톡을 하지 않나요? 노래를 듣거나? 네 이게 비동기식 처리 입니다.
동시에 여러가지의 일을 하는 형식이 비동기식 이라고 하고 반대로 핸드폰게임 다운로드가 다끝날때 까지 기다렸다가 카톡을 하고 카톡 메세지 끝나면 음악을 듣고 단계 별로 일을 처리하고 시작하는 형식이 동기식 입니다.

function hello() { return "Hello" };
hello();

위의 함수는 "Hello"를 반환합니다.

async 함수를 사용하게 되면 어떻게 될까요?

async function hello() { return "Hello" };
hello();

콘솔로 확인해보면 아마 hello가 아닌 promise 가 확인됩니다.
이유는 비동기 식으로 진행되었기 때문에 펑션의 값이 아직 정해지지 않았기 때문입니다.
비동기식은 여러가자의 일들이 동시에 이루어지다 보니 어떤 특정한값을 담아주지 못합니다. 그래서 hello라는 값을 반드시 넘겨줄게 약속할게! 의미가 Promise라고 보면됩니다.

그러면 비동기식이지만 난 값을 받아야해! 라고 한다면 await 를 사용하면됩니다.

await

await 키워드는 JavaScript 런타임이 이 라인에서 비동기 코드를 일시 중지하여 비동기 함수 호출이 결과를 반환할 때 까지 기다리게 합니다. 그러나 외부의 다른 동기 코드는 실행될 수 있도록 합니다. 작업이 완료되면 코드는 계속 이어져서 실행됩니다. 예를들면 아래와 같습니다.

let response = await fetch('coffee.jpg');

fulfilled된 fetch() Promise에서 반환된 응답은 해당 응답이 사용할 수 있게 되면 response 변수에 할당됩니다. 그리고 parser는 해당 응답이 발생할 때 까지 이 라인에서 일시 중지됩니다. response가 사용 가능하게 되면, parser 는 다음 라인으로 이동하게 되고 그 라인에서 Blob 을 생성하게 됩니다. 이라인도 Promise기반 비동기 메서드를 호출하므로, 여기서도await 을 사용합니다.

const callGrapQlApi = async() => {

        //const result = await axios.get("https://koreanjson.com/posts/1"); //restApi방식
        const result = await callApi({
            variables:{
                writer:'냥냥이',
                title: '냥냥펀치',
                contents: '냥냥'
            } // 마치 함수처럼 쏘오오옥 들어간다 어디로? 여기루 =>  myMutation($writer:String, $title:String, $contents:String) 
        }); //graphql
        console.log(result);
        setData(result.data.createBoard.message)
        //setData(result.data.title);

   }

간단하게 데이터와 통신 하게되면 const result 값에 writer , title , contents 값들이 객체로 담아서 백엔드로 보내는 코드이다.

그럼 result안에 무조건 객체가 들어가 있다는 말인데?
들어가 있다?? 확실하게 알수 있는건 await를 사용함으로서 현재 지금 저 정보들이 result로 값이 담기기 전까지 코드 다음줄로 넘어가지 말라고 했기 때문에 result 변수에는 객체에 값이 들어가 있는걸 알수 있다.
만약 await가 없다면? 없다면 객체의 값이 아닌 Promise 가 반환될것이다.

function 앞에 async 키워드를 추가하면 두 가지 효과가 있습니다.
함수는 언제나 프라미스를 반환합니다.
함수 안에서 await를 사용할 수 있습니다.
프라미스 앞에 await 키워드를 붙이면 자바스크립트는 프라미스가 처리될 때까지 대기합니다. 처리가 완료되면 조건에 따라 아래와 같은 동작이 이어집니다.
에러 발생 – 예외가 생성됨(에러가 발생한 장소에서 throw error를 호출한 것과 동일함)
에러 미발생 – 프라미스 객체의 result 값을 반환