Post
Promise란?
Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다. Promise는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.
Promise에는 다음의 세 상태가 존재한다.
| 대기(pending) | 비동기 처리 로직이 아직 완료되지 않은 상태 |
| 이행(fulfilled) | 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 |
| 거부(rejected) | 비동기 처리가 실패하거나 오류가 발생한 상태 |
Promise가 이행 및 불발된 후에는 다음의 함수가 실행된다.
| .then() | 약속이 이행될 경우, then()가 실행된다. |
| .catch() | 약속이 불발될 경우, catch()가 실행된다. |
| .finally() | 약속이 이행되든 불발되든, 무조건 finally()가 실행된다. |
fetch
(1) fetch
fetch (엔드포인트)
fetch는 실행하면 promise라는 객체를 가지고 오게 된다.
const fetchImg = fetch(
);
console.log(fetchImg); // Promise { <pending> }
(2) then
JavaScript
const fetchImg = fetch(
);
fetchImg.then(function (response) {
const json = response.json();
json.then(function (result) {
console.log(result.results);
});
});
ON BROWSER
(3) then + return 쓰기
JavaScript
const fetchImg = fetch(
);
fetchImg
.then(function (response) {
return response.json();
})
.then(function (result) {
console.log(result.results);
});
ON BROWSER
'JavaScript related' 카테고리의 다른 글
| JavaScript addEventListener("keyup") (1) | 2023.01.26 |
|---|---|
| JavaScript forEach (0) | 2023.01.26 |
| JavaScript Async Function (0) | 2023.01.25 |
| JavaScript deep & shallow copy (0) | 2023.01.25 |
| JavaScript Array.fill.map (0) | 2023.01.25 |