동기 비동기 - 실습

비동기와 DOM을 조작하는 문제

1. Promise 다뤄보기

1. getData 라는 주어진 url을 인자로 받는 함수를 만들어주세요.
2. getData 는 3초 후 url이 기준 url과 동일할 경우 성공적으로 데이터를 반환하고, 틀릴 경우 에러를 발생시킵니다.
3. then과 catch를 이용하여 데이터를 처리하는 방법과 에러를 처리하는 방법 두 가지를 각각 보여주세요.

// 주어진 API_URL, WRONG_URL 링크
const API_URL = "https://open.api.com/v1/data";
const WRONG_URL = "https://open.api.com/v1/wrong";

먼저 3초 후 url이 기준 url과 동일할 경우 성공적으로 데이터를 반환하고,
틀릴 경우 에러를 발생시키는 코드

setTimeout()함수는 특정 시간이 지난 다음에 코드를 실행하는 함수이다.
자바스크립트의 코드의 일종의 타이머를 설정해준다.
3초가 지난 후 코드가 실행된다.

then과 catch를 이용하여 데이터를 처리하는 방법과 에러를 처리

getData()에 인자로 API_URL이 들어갔으니,

위의 함수 선언 부분 function getData(url)에 API_URL이 들어가고
if문 조건에 API_URL === API_URL이 되므로,
resolve("성공!")을 반환받아 성공!이 출력된다.

만약 getData(WRONG_URL)이 들어간다면
if문 조건에 WRONG_URL === API_URL이 되므로,
.catch가 실행되며 reject("실패")를 반환받아 실패!가 출력된다.

2. Async / Await 다뤄보기

위 1번 문제에서 다루었던 비동기 처리를 async, await 키워드를 사용하여 코드를 수정해서 작성해주세요.

// async await 를 사용한 코드로 변경해보기

async 를 사용하여 getData(url)함수를 호출하여
만약 url === API_URL이라면
result에 resolve 결과값을 담고 console에 성공!을 출력한다.

만약 url !== API_URL이라면
catch를 이용하여 e에 reject를 담아
console에 실패!를 출력한다.