23.01.19 - fetch, axios

1. fetch API

 

자바스크립트를 사용하면 필요할때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다. 

 

✅ 네트워크 요청이 필요할때 

• 주문 전송하기
• 사용자의 정보 읽기
• 서버에서 최신 변경분 가져오기

fetch API를 사용하면 페이지 새로고침 없이 네트워크 요청을 보내고 새 정보를 받아올 수 있다. 

 

1) fetch의 역할

특정 URL로부터 정보를 받아올 수 있다. 

이 과정은 비동기로 이루어지며 경우에 따라 시간이 걸릴 수도 있다. 

이때는 blocking이 발생하면 안되므로 특정 DOM에 정보가 표시될때까지 로딩창을 대신 띄우기도 한다. 

 

2) fetch 사용하기

let promise = fetch(url, [options])

• url : 필수. 접근하고자 하는 url을 넣어줌
• options : 선택옵션. method나 header 등을 지정 가능. 아무것도 넘기지 않으면 기본적으로 GET 메서드로 진행된다.

 

📂 예시

let url =
  "https://koreanjson.com/posts/1";
fetch(url)
  .then((response) => response.json()) // 1
  .then((json) => console.log(json)) // 2

fetch가 호출되면 브라우저가 네트워크 요청을 보내고 Promise 객체가 반환된다. 

1. 서버에서 응답을 받으면 반환된 Promise가 내장 클래스 Response(가져오고자 하는 리소스의 경로를 나타냄)의 인스턴스와 함께 이행 상태가 된다. 

2. Response 객체는 HTTP 응답 전체를 나타내는 객체이므로, 추가 메서드를 호출해 응답되는 JSON 콘텐츠를 받을 수 있다. response.json()을 사용해 응답을 JSON 형태로 파싱한 결과로 이행하는 또 다른 Promise를 반환한다. 

 

let url = 'https://koreanjson.com/posts/1'
const asyncFetch = async () => {
    let fetchData = await fetch(url)
    let jsonData = await fetchData.json()
    console.log(jsonData)
}
asyncFetch()

async / await 형태로는 이렇게 쓸 수 있다. 

 

 

2. Axios

1) axios란

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기통신 라이브러리이다. 

fetch보다 사용이 간편하면서 추가적인 기능들이 포함되어있다. 

 

✅ fetch vs axios

• fetch
  • 빌트인 API. 별도 설치 X
  • .json() 메서드를 사용해야 함
• axios
  • 서드파티 라이브러리. 별도 설치 O
  • 자동으로 JSON 데이터 형식으로 변환됨 

 

2) axios 사용법

axios는 서드 파티 라이브러리이므로 설치가 필요하다. 

$ npm install axios

 

axios는 fetch와 기본 원리는 같다. 

 

🤔 GET? POST? 

GET과 POST는 HTTP 요청 메서드이다. 

HTTP 요청 메소드를 사용해 주어진 리소스에 수행하기를 원하는 행동이나 서버가 수행해야 할 동작을 지정할 수 있다. 

 

HTTP 요청 메서드의 종류는 아래와 같다. 

• GET : 리소스 조회에 사용함.
• POST : 서버로 요청 데이터 전달함
• PUT : 리소스를 현재 메시지의 값으로 생성하거나, 존재할경우 기존 리소스를 삭제하고 덮어쓰기함
• DELETE : 특정 리소스의 삭제를 요청
• PATCH : 리소스를 부분적으로 변경함. 지원하지 않는 경우 POST로 대체함
• HEAD : GET과 동일하지만 메시지 바디를 제외하고 반환
• OPTIONS : 대상 리소스에 대한 통신을 설정하는데 사용
• CONNECT : 대상 자원으로 식별되는 서버에 대한 터널을 설정
• TRACE : 대상 리소스에 대한 경로를 따라 메시지 루프백 테스트를 수행

 

 

(1) GET 요청

정보를 요청하기 위해 사용함. url은 반드시 인자를 넣어준다. 

axios.get("url"[,config])

// Promise 작성
axios.get('https://koreanjson.com/users/1')
  .then(function (response) {
    // 성공 핸들링
    console.log(response);
  })
  .catch(function (error) {
    // 에러 핸들링
    console.log(error);
  })
  .then(function () {
    // 항상 실행되는 영역
  });
  
  
  // async / await 작성
  async function request() {
      const response = await axios.get('https://koreanjson.com/users/1');
      const { data } = response;
      console.log(data);
  }
  request();

 

(2) POST 요청

서버에게 데이터를 보내기 위해 작성한다. url은 필수로 작성한다. 두번째 인자로는 보낼 데이터를 작성한다. 

axios.post("url"[, data[, config]])

// Promise 작성
axios.post('/user', { // url
    firstName: 'Fred', // 넣어줄 데이터
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response); // 성공 핸들링
  })
  .catch(function (error) {
    console.log(error); // 에러 핸들링
  });
  
  
  // async / await 작성
  async function request() {
      const response = await axios.post('/user', {
        firstName: 'Harry',
        lastName: 'Potter'
      });
      const { data } = response;
      console.log(data);
  }
  request();

 

 

 

 

****************

 

일일회고 & 요약정리 

 

fetch는 url로 네트워크 요청을 하고 결과를 받아올 수 있다. 

fetch는 프로미스를 리턴한다. 

요청시에는 response로 감싸진 프로미스를 받을 수 있고, .json() 메서드를 통해 JSON 형태로 본문을 받을 수 있다. 

axios도 fetch와 같이 네트워크 요청을 할 수 있느 서드 파티 라이브러리다. 

별도의 설치가 필요하지만 자동으로 JSON 형태로 값을 받을 수 있다. 

 

 

*

 

거의 3일째 프로미스 공부하는중? 

그치만 너무 어렵다... 그래도 개념을 이해했다고 생각했는데 막상 코드를 작성하려니까 계속 예제를 보게되고 그렇다... 

프로미스에서 어려운 점은, 이 결과가 then으로 넘겼을때 프로미스 객체를 리턴한다는 점이다. 

내가 원하는건 프로미스 객체가 아니라 프로미스의 result 값인데 자꾸 객체가 리턴되니까 그걸 꺼내기가 너무 어렵다...ㅠ 

코드가 늘어나면 내가 보기가 어려워서 가능한 간단하게 해보려고 하고있는데, 오히려 프로미스에서는 그렇게 하니까 내가 원하는 결과가 나오지 않는것 같다. 우선은 먼저 내용이 길어지더라도 차례대로 구현해보고 줄일 수 있는 부분이 있다면 차근차근 정리해나가는 것이 좋을 것 같다.