2021 03 29

2021-03-29¶

Ajax¶

비동기 방식으로 데이터를 주고받는 JS 기술 - 초기에는 XML 형식의 데이터 주고받음 - 현재는 JSON을 주고받는 것이 표준으로 자리잡음

페이지 새로 고침 없이 서버에 요청하고, 응답을 받을 수 있음 - 이를 통해 서버로 부터 받은 데이터를 DOM을 활용하여 페이지 갱신해 줄 수 있음

페이지의 일부만을 수정 가능케 하는 기술의 총칭!

Promise¶

서버와의 통신: 얼마나 걸릴지 모름 - Promise를 만들어 해결해보자!

미래의 어떤 시점에 결과를 제공한다는 약속! - 성공일수도! - 실패일수도! - 성공/실패 모르니까, 각각에 대응하는 메서드를 제공하자

Promise는 "비동기 작업을 전달받아 응답에 따라 두 가지 메서드 중 하나를 호출하는 객체!" - 비동기 작업 성공! -> then() - 비동기 작업 실패! -> catch()

new Promise(function(resolve, reject) {
  // ...
}).then(resolve()).catch(reject())

fetch¶

Ajax 기술의 복잡도를 낮춰 사용할 수 있도록 fetch 보급
Promise를 반환함 - 따라서, then() 메서드에 응답 처리하는 콜백함수 추가하기

HTTP GET 방식의 요청

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(data => {
    if (!data.ok) {
      throw new Error(data.status)
    }
    return data.json()
  })
  .then(post => {
    console.log(post.title)
  })
  .catch(error => {
    console.log(error)
  })

HTTP POST 방식의 요청

const newPost = {
  title: 'jun',
  body: 'jun is cool boy',
  userId: '1'
}

const option = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(newPost)
}

fetch('https://jsonplaceholder.typicode.com/posts/1', option)
  .then(data => {
    if (!data.ok) {
      throw new Error(data.status)
    }
    return data.json()
  })
  .then(post => {
    console.log(post.title)
  })
  .catch(error => {
    console.log(error)
  })