08.자바스크립트[async 와 await]

02 비동기와 API

1.async와 await

async 와 await 은 프로미스 객체를 더욱 쉽게 작성할 수 있게 도와주고 코드를 직관적으로 해석할 수 있게 도와줌

 

• delay 함수가 호출하면 생성한 프로미스 객체를 반환할 수 있도록  리터문으로 작성
• delay 함수를 호출하는 start라는 함수를 작성해 줌
• delay 함수는 프로미스 객체를 반환하기 때문에 함수 호출문 뒤에 then 메세드를 사용해서 resolve함수를 통해 전달받은 결과 값을 출력하는 코드를 작성함 

async라는 키워드를 작성해 볼 경우 

• async는 비동기를 수행할 함수의 오른쪽에 작성함 
• 어떠한 함수에 async라는 키워드를 작성하면 해당 함수는 항상 자동으로 프로미스 객체를 반환함
• await 키워드는 async 키워드가 작성된 함수의 내부에서 사용하는 키워드임 
• await 키워드가 작성된 코드가 실행되면 해당 작업이 종료될 때까지 프로그램의 실행이 중단됨

• await이라는 키워드는 프로미스 객체가 처리 완료될 때까지 함수의 실행을 기다리게 만듦
• 비동기 작업들을 소요되는 시간을 예측할 수 있게 

 

다만 await 키워드는 프로미스 객체를 반환하는 어떠한 함수의 내부에서만 사용이 가능하기 때문에

async 키워드가 붙어 있는 함수의 내부에서만 사용 가능함 

 

 

try 문 내부에는 우리가 실행할 코드를 작성해 주고 catch 문의 내부에는 에러 객체를 전달받고 

에러가 발생했을 때 실행 될 코드를 작성해 주면 에러처리를 쉽게 할 수 있음

• start()라는 함수는 비동기 작업을 처리하는 함수이기 때문에 async 키워드를 작성해 주고 try와 catch 문을 사용함 
• 비동기 처리했음에도 불구하고 await이라는 키워드를 사용해서 작업을 순차적으로 처리하고 있기 때문에 18초씩이나 오래 걸림 
• await이라는 키워드는 해당 작업이 처리 완료 될 때까지 다음 작업들을 중단한다는 특징이 있기 때문에 전부 처리가 완료 될 때까지 해당 작업들이 실행되지 않아 이렇게 한 번에 순서대로 출력

이를 해결하기 위해 promise all 사용함

훨씬 빠르게 10초 만에 모든 작업이 완료됨

promise all은

• 자바스크립트에서 제공되는 메서드로 여러 개의 프로미스를 병렬로 실행하고
• 모든 프로미스가 완료될 때까지 기다렸다가 결과를 한 번에 반환하는 역할을 함
• 전달된 프로미스 배열이 모두 Fulfilled 성공될 때까지 대기하며 하나라도 실패 상태가 된다면 즉시 실패 상태가 되어 오류를 출력하게 됨
• async와 await 키워드는 API 호출과 함께 자주 사용되는 키워드임

---

2.API 호출

비동기 처리는 대표적으로 웹 사이트에서 데이터를 주고받는 통신을 할 때 사용됨

• 웹 브라우저는 API를 사용해서 웹 사이트에 필요한 데이터를 요청하고 전달받음
• API를 호출하기 위해서는 가장 먼저 API 호출에 응답할 수 있는 어떠한 서버가 필요함
• API는 API 주소를 통해 호출할 수 있고 API 주소를 사용해 API를 호출하면 서버는 화면에 표시된 데이터들을 웹 브라우저에게 전달함

https://jsonplaceholder.typicode.com/ 에 Resources에 user 10 API 

데이터는 다음과 같이 어떤 하나의 배열로 이루어져 있고 배열 안에는 각각의 데이터가 객체 형태로 저장되어 있음

이러한 자바스크립트의 데이터 구조를 제이슨 JSON (JavaScript Object Notation )이라고 부름

 

JOSN (JavaScript Object Notation )

• 자바스크립트 객체 표기법이라는 뜻으로 자바스크립트에서 데이터를 문자열 형태로 나타내기 위해서 사용함
• 보통 웹 애플리케이션에서 데이터를 전송할 때 사용되며 Key와 Vaule 쌍으로 이루어져 있음

API 호출

fetch라는 내장함수를 사용해서 API를 호출할 수 있음 

fetch 메서드의 괄호 안에는('사용하고자 하는 API 주소')를 작성

json 형식의 데이터가 아니라 Response 객체가 출력됨

주의

fetch함수와. then 메서드 연결 문제: fetch 함수 뒤에. then 메서드를 연결할 때는 줄 바꿈 없이 연결해야 함.

• response 변수를 출력하면 Fulfilled 상태인 promise 객체가 출력됨
• promise 객체를 반환하는 함수는 비동기 처리 함수이고 이러한 함수는 then 메서드를 사용해 결과 값을 출력할 수 있음

async와 await 키워드 사용한다면?

fetch 메서드가 반환하는 프로미스 객체가 처리될 때까지 함수의 실행을 중단할 수 있도록 fetch 메서드의 앞쪽에는 

await 키워드를 작성함 

JSON 형식의 데이터는 javaScript 에서 객체 형태의 데이터를 가독성 좋게 나타내기 위한 하나의 표기법이기 때문에

javaScript 에서 JSON 형식의 데이터를 javaScript  가 활용할 수 있는 어떠한 객체 형태로 변환하기 위해서는

JON();이라는 메서드를 사용해야 한다 response에 담긴 값을 (parsing 파싱) 한 결과를 data라는 변수에 할당함

fetch 메서드의 반환값인 response 에는 json 형식의 데이터가 담겨 있기 때문에 json 메서드를 사용해서 해당 변수에 담긴 값을 자바스크립트가 활용할 수 있는 어떠한 객체의 형태로 변환함

 

fetch 메서드는 비동기적으로 처리되는 함수이기 때문에 API 호출이 완전히 끝난 후에 response 객체를 객체로 변환할 수 있도록 다시 해당 코드에도 await 키워드를 작성해야 함

※ 데이터가 JSON(); 로 인해 배열에 담겨서 출력됨 

 

JavaScript에서 "파싱(parsing)"이란 특정 형식의 데이터를 다른 형식으로 변환하는 과정을 의미합니다. 주로 문자열을 더 쉽게 다룰 수 있는 객체나 배열 등으로 변환하는 작업을 말합니다

 

• API 호출처럼 성공할 수도 실패할 수도 있는 비동기 작업은 항상 에러를 처리할 수 있도록 처리해야 함

1. try 문의 내부에는 fetch 메서드를 사용해서 API를 호출하는 코드를 작성 
2. JSON 형태의 데이터를 알맞게 파싱 해서 출력하는 코드를 작성
3. catch 문 내부에는 매개변수로 err 객체를 전달받아 에러가 발생하면 에러를 출력하는 코드를 작성

※ API 호출을 async와 await를 사용해서 비동기로 처리하게 되면 가독성이 좋고 코드의 실행 순서와 코드의 역할을 직관적으로 알 수 있어 좋고 에러 처리 또한 편리하게 할 수 있음