Zoeeey
Stack flows in you
Zoeeey
  • 분류 전체보기 (155)
    • 💡 UXUI (4)
      • UXUI (2)
      • UI (2)
      • UX (0)
    • 🟨 JavaScript (66)
      • 개념 (42)
      • 정리 (2)
      • 문제풀기 (프로그래머스, 코딩애플) (15)
      • 응용하여 자동화or문제해결하기 (2)
      • 기타 (5)
    • ⚛️ React (49)
      • 개념 (27)
      • 개념(Redux) (3)
      • 정리 (4)
      • 문제풀기 (코딩애플: React) (15)
    • 📘 TypeScript (10)
      • 개념 (8)
      • 문제풀기 (코딩애플) (2)
    • 🌐 HTML,CSS (18)
      • 실무에서 자주 발생한 오류들 (10)
      • 뒤늦게 알아서 뼈아픈 유용한 CSS (6)
      • 기타 자주 쓰는 CSS (2)
    • 💻 CS (8)
      • CS (5)
      • 정규표현식 (2)
      • Git,Github (1)

태그

  • state
  • 삼항연산자
  • object
  • CS
  • react
  • redux
  • Props
  • 오류
  • useEffect
  • Ajax
  • JavaScript
  • class
  • array
  • json
  • UXUI
  • CSS
  • 프로그래머스
  • 코딩애플
  • axios
  • TypeScript
전체 방문자
오늘
어제
hELLO · Designed By 정상우.
Zoeeey

Stack flows in you

⚛️ React/개념

React : AJAX로 서버와 통신하기 (post, 동시에 요청 여러개 날리기, fetch)

2023. 6. 7. 12:43

POST 요청 하는 법

서버에 데이터를 보내기 위해서는 아래처럼 작성하면 된다.

axios.post('URL', {name : 'kim'})

동시에 AJAX 요청 여러개 날리기

동시에 여러 url로 ajax 요청을 날리려면 아래처럼 작성하면 된다.
그 아래 then()을 붙이면 둘 다 완료되었을 시 코드를 실행한다.

Promise.all( [axios.get('URL1'), axios.get('URL2')] )
  .then(()=>{})

fetch

axios 라이브러리를 사용하면 자동으로 JSON을 object/array 형태로 변환해주지만, 그냥 fetch를 쓰면 변환해줘야 한다.

fetch('URL').then(결과 => 결과.json()).then((결과) => { console.log(결과) } )

// 예시
fetch('https://codingapple1.github.io/js/more1.json')
  .then(res => res.json())
  .then(data => {
    insertData(data);
  })
  .catch(error => {
    console.log(`요청 실패!`);
  })

출처 : 코딩애플 https://codingapple.com/

저작자표시 비영리 동일조건

'⚛️ React > 개념' 카테고리의 다른 글

React : 에서 자주 쓰는 if문 패턴 5가지 (if, 삼항연산자, &&, switch, object)  (0) 2023.06.29
React : props 중첩되어있을 때 편한 "Context API" (사용법)  (0) 2023.06.15
React : AJAX로 서버와 통신하기 (ajax, axios)  (0) 2023.05.26
React : useEffect, clean up (실행조건)  (0) 2023.05.23
React : Lifecycle, useEffect (사용법)  (0) 2023.05.22
    '⚛️ React/개념' 카테고리의 다른 글
    • React : 에서 자주 쓰는 if문 패턴 5가지 (if, 삼항연산자, &&, switch, object)
    • React : props 중첩되어있을 때 편한 "Context API" (사용법)
    • React : AJAX로 서버와 통신하기 (ajax, axios)
    • React : useEffect, clean up (실행조건)
    Zoeeey
    Zoeeey
    길게 생각하고 짧게 그리기

    티스토리툴바