React.js(8) - FetchGET&POST

👩‍💻 FetchGET 

http://example.com?a=1&b=2

 

- url ? 뒤에 파라미터=값 $파라미터2=값 형태로 필요한 데이터를 전달한다.

- 주로 데이터 조회나 검색 등의 기능에 사용됨 

- 데이터를 조회해 가져와 사용하기 위한 메서드

 

 

✍ FetchGet.js

import React, {Component} from 'react';

class R059_FetchGet extends Component {
    componentDidMount= async ()=>{
        const response = await fetch('http://date.jsontest.com/');
        const body = await response.json();
        alert(body.date);
    }
    
    render() {
        return (
            <h1>fetch get</h1>
        )
    }
}

export default R059_FetchGet;

 

💚async- await 메서드

✍ 형태

 componentDidMount= async ()=>{
        const response = await fetch('http://date.jsontest.com/');
        const body = await response.json();
        alert(body.date);
    }

 

- JavaScript에서 비동기적인 처리를 간결하게 작성할 수 있도록 하는 메서드

- Promise 객체를 반환하는 함수를 마치 동기적인 코드처럼 작성할 수 있다.(사실 비동기적임)

- async 키워드로 함수를 선언하며, 함수 내에서 await 키워드를 사용하여 Promise 객체를 처리한다.

- await 키워드는 Promise 객체가 처리될 때까지 코드의 실행을 일시 중지하고, 처리 결과를 반환한다. 

- async-await 함수는 try-catch 구문과 함께 사용하여 비동기적인 처리 중 발생할 수 있는 오류를 처리할 수 있다.

- response.json() 중 date 타입 데이터들만 alert 함수로 반환해준다. 

 

 

🐤 try - catch 

async function fetchExample() {
  try {
    const response = await fetch('https://example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

- fetch() 함수나 json() 메서드에서 오류가 발생할 경우, catch 구문에서 오류를 처리하고 에러 메시지를 콘솔에 출력해준다.

 

📌 try-catch

- 예외 처리를 할 때 사용하는 구문

- try 블록에는 예외가 발생할 가능성이 있는 코드를 작성하고, catch 블록에는 예외가 발생했을 때 처리할 코드를 작성한다.

try {
  const result = 10 / 0; // 0으로 나누기
  console.log(result);
} catch (error) {
  console.error(error);
}

- 10을 0으로 나누는 코드를 작성했는데, 이는 유효하지 않은 계산이므로 예외가 발생한다. 이때 catch 블록에서는 예외를 처리하고 에러 메시지를 출력하게 됨

 

📌 파일 읽어오는 코드 예시 작성

try {
  const data = readFile('data.txt'); // 파일 읽기
  console.log(data);
} catch (error) {
  if (error.code === 'ENOENT') {
    console.error('File not found'); // 파일이 없는 경우
  } else {
    console.error(error); // 기타 오류
  }
}

 

 

💚 Promise 객체

- 비동기처리를 위한 객체

- 비동기 작업이 완료될 때까지 기다리지 않고 다음 작업을 처리할 수 있도록 해준다.

 

💚 Promise 객체 상태

 

• 대기(pending) 상태: 비동기 작업이 아직 완료되지 않은 상태
• 이행(fulfilled) 상태: 비동기 작업이 성공적으로 완료된 상태이며, 이때 결과 값이 전달된다.
• 거부(rejected) 상태: 비동기 작업이 실패한 상태입니다. 이때 오류 정보가 전달됨

 

 

 

 

💚 fetch

const response = await fetch('http://date.jsontest.com/');

- HTTP 요청을 보내고 응답을 반환한다.

- API에서 데이터를 가져와서 반환해준다. 

- await로 fetch의 반환결과를 기다린다. 

 

 

 

💚 response.json()

const body = await response.json();

- 이후 response.json() 메서드를 사용하여 응답을 JSON 형태로 변환함

 

 

💚 FetchPOST

- url 뒤에 파라미터를 표시하지 않고 사용함(http body에 파라미터를 넣지 않는다.)

- 서버의 상태나 데이터를 변경하는 등의 수행 작업에 사용된다. 

 

 

✍ FetchPost.js

import React from "react";
import { Component } from "react";

class R060_FetchPost extends Component {
    componentDidMount=async ()=>{
        const response = awiait fetch('http://data.jsontest.com/', {
            #fetch 방법은 get과 비슷하지만 두 번째 파라미터에 post 호출에 대한 정보가 추가 된다. 
            #Content-Type 변수 : json 형태의 데이터를 사용하기 위해 application/json에 할당한다.
            method : 'POST',
            headers : {
                'Content-Type' : 'application/json',
            },
            body : {a:"react", b:200},

        });
        const body = await response.json();
        alert(body.date)


    }

    render () {
        return (
            <h1>fetch post</h1>
        )
    }
}

export default R060_FetchPost;