[🌳javascript] 서버에 데이터 요청하기

ajax

서버에 get,post 요청할때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능

ajax 사용하면 새로고침 없이도 쇼핑물 상품을 더 가져올 수 있고, 새로고침 없이도 댓글을 서버로 전송할 수 있게 된다.

그런데 서버에 데이터를 요청할 때는 우리가 제발 데이터 주세요오오 라고 떼쓴다고 주지 않고, 규격에 맞춰 요청을 해야 한다. 안 그러면 안준다.

그럼 이제부터 데이터를 잘 요청하는 법에 대해 알아보도록 하자.

사용법

다음 3개 중 택1

• XLHttpRequest <- 책에서만 보던 옛날 문법쓰...
• fetch() <- 바닐라 과제할 때 지긋지긋하게 쓰던 문법
• axios 같은 외부 라이브러리 <- JSON으로 도착한 자료는 알아서 array/object 로 바꿔준다

fetch

바닐라 과제 때 사용하던 fetch()는 브라우저 기본 함수여서 코드 짤때 일일이 json() 처리를 다 해줘야 한다.(서버와 데이터를 주고 받을 때는 문자만 주고받을 수 있다. array, object 다 불가능...)
이렇게 response.json()을 호출하면 JSON 데이터를 javascript 객체로 변환한다.

fetch('https://데이터받아오는url')
  .then(res => res.json())
  .then(function(data){
    console.log(data)
  })
  .catch(function(error){
    console.log('실패')
  })

JSON.parse()와 res.json()의 차이

JSON.parse()에는 응답(response) 바디만을 넣어야한다. 바디와 헤더가 들어가면 데이터를 읽어오지 못한다.
res.json()에는 응답(response) 헤더가 들어가도 바디만 읽어서 불러온다.

axios 사용

난 계속 vite 로 리액트 프로젝트 중이니
1. yarn add axios로 설치했다.
2. import axios from 'axios'라고 상단에서 import하기
3. axios.get(URL).then(()=>{})
4. 실패할 경우 대비해 .catch()도 함께 작성해주자

axios는 promise기반의 ajax 라이브러리로, 이 기회에 promise도 다시 한번 정리하면 좋을 것 같아 복습시간~!

Promise

만드는 방법

let 프로미스 = new Promise();
프로미스.then(function(){
}).catch(function(){
})

then:프로미스 안의 코드 실행이 성공일 때 then()함수 내의 코드 실행
catch: 프로미스 안의 코드 실행이 실패할 때 catch() 함수 내의 코드 실행

장점

일단 보기 편하다. then 함수를 붙여서 순차적 실행되므로!
실패시 특정 코드 실행해주세요(catch) 라고 코드 작성 가능!

용도

Promise는 쉽게 말하면 성공하면 then()안의 코드 실행, 실패하면 catch()안의 코드 실행해주세요~
라고 말하는 성공&실패 판정기계인데, Promise안에는 아무거나 다 집어넣을 수 있다. 예를 들어, 1+1 연산 끝나면 성공판정 내려주세요! ajax 요청으로 서버에서 데이터 잘 가져오면 성공, 에러나면 실패판정 내려주세요!

new Promise() 안에 콜백함수를 하나 추가해주면 그 안에서 성공/실패 판정 내릴 수 있다.

let 프로미스 = new Promise(function(성공,실패){
	let 어떤연산=1+1;
	성공(어떤연산)});
프로미스.then(function(a){
  console.log(`와 결과는 ${a}입니다!성공했어요!`)
}).catch(function(){
  console.log('오우..실패입니다..')
})

참고로, 연산결과 같은걸 then안에서 활용하고 싶으면 성공()안에 넣어주고, 나중에 파라미터 형태로 그 결과를 사용할 수 있다.

.then()

promise를 리턴하고, 두 개의 콜백 함수를 인수로 받는다. 하나는 Promise를 이행했을때, 하나는 거부됐을 때

p.then(function(value){
  //이행
}, function(reson){
  //거부
});

.catch()

const 함수=new Promise(function(res,rej){
 서버에서 데이터를 가져오쇼})

함수.then().catch(function(err){
	console.log(err)
});
// rej()의 결과 값 Error를 err에 받음

method chaining

연속적인 코드 줄에서 개체의 method를 반복적으로 호출하는 것을 의미한다. method가 객체를 반환하면 그 반환값(객체)이 또 다른 method를 호출할 수 있다.

---

• 오늘 새롭게 알게 된 것

• 오늘 궁금했거나 더 알고 싶은 것
  그니까 .then()은 두 개의 콜백함수를 받을 수 있지만, 보통 성공했을 경우만 적고, 나머지는 .catch()로 받는다는건가?

• 오늘의 일기
  할일이 아주 많군. 보람찬 하루였다.