1. Promise
1. Promise 클래스는 프로미스 인스턴스를 반환
2. Promise 클래스가 담겨있는 함수를 호출할 때 Promise 클래스의 생성자 함수 호출 결과가 반환됨
3. then 키워드의 argument에 콜백함수를 작성하면 Promise 생성자 함수의 매개변수로 전달됨
- then 메서드의 콜백에서 Promise의 반환되는 인스턴스를 return 키워드에서 다시 반환
그러면 then 메서드를 한번 더 사용가능
4. 원하는 위치에서 콜백함수 실행 가능!
function render() {
return new Promise(resolve => {
const img = document.querySelector('img')
img.src = 'https://naver.com'
img.addEventListener('load', () => {
document.body.append(img)
resolve()
})
})
}
renderImage().then(() => {
console.log(1)
return renderImage()
}).then(() => {
console.log(2)
return renderImage()
})
2. fetch
1. 기본 개념
- fetch 함수로 서버와 네트워크 통신
- 클라이언트가 서버로 요청을 보내고 서버는 클라이언트에게 응답
- request: body에 요청할 데이터를 담아서 전송
- response: body에 응답 데이터를 담아서 전송
2. 사용방법
fetch(url, options)
- request
- body에서 객체 데이터를 JSON.stringify로 문자화하여 전송
- 문자데이터로 통신이 가능 → 객체 데이터나 배열 데이터를 직접적으로 사용 불가
- response
- 응답 결과를 json 메서드로 분석하고 분석결과를 then메서드의 data 매개변수에 담아서 사용
fetch('https://', {
method: 'POST',
headers: {
'Content-Type':'application/json'
},
body: JSON.stringify({
name: 'jerry',
age: 800,
isValid:true,
emails:['jerry@gmail.com']
})
})
.then((res) => res.json())
.then(data => console.log(data))
3. 활용
const h1El = document.querySelector("h1");
const ulEl = document.createElement("ul");
ulEl.classList.add("users");
document.body.append(ulEl);
h1El.addEventListener("click", () => {
ulEl.textContent = "Loading";
fetch("https://api.heropy.dev/v0/users")
.then((res) => res.json())
.then((data) => {
console.log("data 결과: ", data);
const { users } = data;
const liEls = users.map((user) => {
const liEl = document.createElement("li");
liEl.textContent = user.name;
const imgEl = document.createElement("img");
imgEl.src = user.photo?.url || "https://heropy.dev/favicon.png";
if (!user.photo) {
liEl.classList.add("no-photo");
}
liEl.prepend(imgEl);
return liEl;
});
ulEl.textContent = "";
ulEl.append(...liEls);
});
});- fetch 함수를 사용하면 Promise 인스턴스가 반환됨
- fetch 함수에서 반환된 Promise 인스턴스는 then 메서드를 사용할 수 있고, 첫번째 then 메서드는 매개변수를 사용해 json 메서드를 호출하고, then 메서드의 콜백에서 반환해 주기
- 두번째 then 메서드에서는 실제 데이터를 받아올 수 있음
3. async-await
- fetch함수를 async-await으로 변경하여 작성 → await 키워드는 then 메서드처럼 promise 인스턴스에서 사용 가능하고 데이터를 기다린다는 의미
- promise 인스턴스 부분에서만 await 키워드 사용 가능
- 데이터가 도착할때까지 기다려야 함( fetch 함수에서는 promise를 통해 데이터가 도착한 이후에 then 메서드롤 사용할 수 있음)
const h1El = document.querySelector("h1");
const ulEl = document.createElement("ul");
ulEl.classList.add("users");
document.body.append(ulEl);
h1El.addEventListener("click", async () => {
ulEl.textContent = "Loading";
const res = await fetch("https://api.heropy.dev/v0/users");
const data = await res.json();
const { users } = data;
const liEls = users.map((user) => {
const liEl = document.createElement("li");
liEl.textContent = user.name;
const imgEl = document.createElement("img");
imgEl.src = user.photo?.url || "https://heropy.dev/favicon.png";
if (!user.photo) {
liEl.classList.add("no-photo");
}
liEl.prepend(imgEl);
return liEl;
});
ulEl.textContent = "";
ulEl.append(...liEls);
});- await 키워드는 데이터를 받아올때까지 기다리고, 받은 데이터를 res 변수에 할당하여 사용
- res변수는 json메서드로 분석하는 과정이 필요 → 분석이 언제 끝날지 모르기 때문에 await 키워드 필요!
- res와 data 변수 모두 promise 인스턴스 반환
- await 키워드는 반드시 async키워드를 사용해야하기 때문에 await의 가장 가까운 함수 앞에 async 키워드를 붙여줘야 함
4. 이행과 거부
1. try-catch 구문으로 예외상황 처리
- fetch 함수를 사용하는 부분을 try 영역에 작성
- 예외 사항이 발상하는 코드와 코드에 영향을 받는 부분 모두를 작성
2. 매개변수
프로미스 생성자 함수는 매개변수로 resolve, reject 사용가능
- resolve : 이행(정상처리)
- reject : 거부(에러상황)
동시에 실행되지 않고 한쪽이 실행되면 다른 한쪽은 실행되지 않음
3. 비동기 코드 용어
- pending: 약속이 이행되거나 거부되기 전 상태
- fulfiled: 약속이 이행된 상태
- rejected: 약속이 거부된 상태
Reference
[제로베이스 프론트엔드 스쿨]프로그래밍 입문자를 위한 자바스크립트 기초개념 강의
'Dev-log > JAVASCRIPT' 카테고리의 다른 글
| JavaScript 함수 (0) | 2024.05.04 |
|---|---|
| JavaScript 함수선언문 vs 함수표현식 (0) | 2024.05.04 |
| JavaScript 원시값과 참조값 (0) | 2024.05.04 |
