promise-thencatch

Info: Promise : javascript의 비동기 처리를 지원하는 객체 중 하나

---

1. Promise 객체는 then과 catch 메서드를 가지고 있다.
   1. then (콜백) 는 통신성공시 결과값 반환
   1. catch (콜백) 는 통신에러시 결과값 반환

---

☑ promise 객체를 반환하는 대표적인 함수 fetch 를 알아보자

Info: 📢 Fetch API 기본예제

---

🔗mdn 문서를 읽어보자

🔗문법을 보자
🔗리턴되는 값을 보자

---

✏️실습 1

var fetched=fetch('https://jsonplaceholder.typicode.com/photos');
console.log(`fetched, ${fetched}`)

(☞ﾟヮﾟ)☞ 매우중요 promise 는 비동기로 동작하는 객체이며 then 과 catch 를 포함하고 있다
(☞ﾟヮﾟ)☞ 매우중요 then 과 catch는 콜백함수!

✏️실습 2
then은 fatch 통신이 성공시 반환되며, catch는 오류시 반환된다

var fetched=fetch('https://jsonplaceholder.typicode.com/photos');
console.log(`fetched, ${fetched}`)
	fetched.then((result)=>{console.log('성공',result)})
	fetched.catch((reason)=>{console.log('실패',reason)})


✏️실습 3
fetched 생략

https://38296b07-33cb-460f-80bc-e30368fe0bd9.mock.pstmn.io/products"
fetch("https://jsonplaceholder.typicode.com/user")
    .then((result) => {
      console.log("성공", result);
    })
    .catch((reson) => {
      console.log("실패", reson);
    });

📢 fetch 함수의 문법과 리턴값의 알아보았다. 반환된 데이터를 다뤄보자

Info: 👁️‍🗨️ https://jsonplaceholder.typicode.com/photos
서버에 저장된 정보는 일반 텍스트 형태로
웹페이지에 출력 시키려면 웹에서 가공할수 있는
언어로 변경해야 한다.

🔗MDN문서가기⇒ 공식문서의 예제 활용
✏️실습예제

fetch('https://jsonplaceholder.typicode.com/photos')
  .then((response) => response.json())
  .then((data) => console.log(data));

🔗추가예제페이지

정리

• fetch 함수는 promise 객체를 반환한다.
• promise객체는 비동기로 동작하며 then, catch 메소드가 있다.
• then,catch 는 콜백함수이며 첫번째 파라미터로 통신의 결과값을 반환받는다

.then((result)=>{})