21 promise thencatch

정보

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

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

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

정보

📢 Fetch API 기본예제

🔗mdn 문서를 읽어보자

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

**✏️실습 1 **

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

프로미스가 반환됨
( promise 는 비동기로 동작하는 객체이며 then 과 catch 를 포함하고 있다 )

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

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

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

catch 가 실행됨

✏️실습 3 fetched 생략

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

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

정보

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

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

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

🔗추가예제페이지

정리

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

1
.then((result)=>{})