JavaScript - fetch API

MoolbumΒ·2021λ…„ 11μ›” 30일
0

JavaScript

λͺ©λ‘ 보기
8/18
post-thumbnail

fetch() πŸ‘¨β€πŸ’»

fetchν•¨μˆ˜λŠ” 데이터λ₯Ό 전달 ν•  λ•Œ μ‚¬μš©ν•˜λŠ” javascript λ‚΄μž₯ν•¨μˆ˜μž…λ‹ˆλ‹€!

ν•¨μˆ˜ν‘œν˜„μ‹
fetch('api μ£Όμ†Œ')
  .then(function(res) {
    return res.json();
  })
  .then(function(res) {
    // 데이터λ₯Ό 응닡 받은 ν›„μ˜ 둜직
  });
ν™”μ‚΄ν‘œ ν•¨μˆ˜ν˜•
fetch('apiμ£Όμ†Œ')
  .then(res => res.json())
  .then(res => {
  //데이터λ₯Ό 응닡 받은 ν›„μ˜ 둜직
  })

fetchμ—μ„œ API μ£Όμ†Œλ₯Ό λ°›κ³  then은 promise λ₯Ό 처리 ν•  λ•Œ μ‚¬μš©λ˜λŠ” λ©”μ„œλ“œλ‹€.
promise κ°μ²΄λŠ” 비동기 μž‘μ—…μ΄ λ§žμ΄ν•  미래의 μ™„λ£Œ λ˜λŠ” μ‹€νŒ¨μ™€ κ·Έ κ²°κ³Ό 값을 λ‚˜νƒ€λƒ…λ‹ˆλ‹€.


1. method

fetch ν•¨μˆ˜μ—μ„œ methodλŠ” 데이터λ₯Ό μ „λ‹¬ν•˜λŠ” 방식을 μ •ν•˜λŠ” λ©”μ„œλ“œμž…λ‹ˆλ‹€.
"GET" , "POST" 두 가지 방법이 μžˆμŠ΅λ‹ˆλ‹€. 기본값은 "GET" μƒνƒœμž…λ‹ˆλ‹€.

  • GET λ©”μ„œλ“œλŠ” 데이터λ₯Ό κ°€μ Έμ˜¬ λ•Œλ§Œ μ‚¬μš©ν•©λ‹ˆλ‹€.
  • POST λ©”μ„œλ“œλŠ” μ„œλ²„λ‘œ 데이터λ₯Ό μ „μ†‘ν•©λ‹ˆλ‹€.

2. body

ν”„λ‘ νŠΈμ—”λ“œμ—μ„œ methodλ₯Ό POST λ°©μ‹μœΌλ‘œ 데이터λ₯Ό 전달해야 ν•œλ‹€λ©΄

  • fetch의 두 번째 μΈμžμ— method 와 body****λ₯Ό μž…λ ₯ν•©λ‹ˆλ‹€.
  • methodλŠ” POST
  • bodyλŠ” JSONν˜•νƒœλ‘œ 보내기 μœ„ν•΄ JSON.stringfy() ν•¨μˆ˜μ— 객체λ₯Ό 인자둜 μ „λ‹¬ν•˜μ—¬ JSONν˜•νƒœλ‘œ λ³€ν™˜ν•©λ‹ˆλ‹€.


3. then

  .then(res => res.json())
  .then(res => { 데이터λ₯Ό 응닡 받은 ν›„μ˜ 둜직 })

첫 번째 then ν•¨μˆ˜μ— μ „λ‹¬λœ 인자 resλŠ” http 톡신 μš”μ²­κ³Ό μ‘λ‹΅μ—μ„œ μ‘λ‹΅μ˜ 정보λ₯Ό λ‹΄κ³  μžˆλŠ” κ°μ²΄μž…λ‹ˆλ‹€.
Response Object 라고 ν•©λ‹ˆλ‹€.μ‘λ‹΅μœΌλ‘œ λ°›λŠ” JSON 데이터λ₯Ό μ‚¬μš©ν•˜κΈ° μœ„ν•΄μ„œ
Response Object 의 json ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜κ³ , return ν•΄μ•Όν•©λ‹ˆλ‹€.

두 번째 then ν•¨μˆ˜μ—μ„œ 응닡 body의 데이터λ₯Ό 받을 수 μžˆμŠ΅λ‹ˆλ‹€.

profile
Front-End Developer πŸ‘¨β€πŸ’»

0개의 λŒ“κΈ€