ajax in react

 방법 3가지

1. jQuery 설치해서 $.ajax() 사용
2. axios 설치해서 axios.get() 사용
3. 자바스크립트 문법 중 fetch() 사용

 

axios 모듈 설치

yarn add axios

or

npm install axios -S

 

사용법 예제

import axios from 'axios';

function App() {

    // 요청주소로 get방식 요청 (promise)
    axios.get('요청 주소')
    .then((result) => {
    	console.log(`성공시 결과값 : ${result}`);
    })
    .catch((err) => {
    	console.log(err)	// catch문은 반드시 넣어야 하며, 요청 실패 시 해당 블록 실행
    })
    .finally(() => {
    	console.log('용도는 명확할 듯');
    })
    
    // async await으로 get 요청
    let sendGet = async () => {
    	try {
        	console.log(await axios.get('요청주소'));
        } catch(e) {
        	console.log(e);
        }
    }
    
    // 아래처럼 http 통신을 위한 요청 메소드 모두 지원
    axios.post();
    axios.put();
    axios.delete();
    axios.patch();
    axios.options();
    
    // post 요청 예제
    axios.post('요청주소', '요청데이터', 'AxiosRequestConfig 객체 정보')
    .then()
    .catch();
    
    /**	AxiosRequestConfig
    
    export interface AxiosRequestConfig<D = any> {
      url?: string;
      method?: Method;
      baseURL?: string;
      transformRequest?: AxiosRequestTransformer | AxiosRequestTransformer[];
      transformResponse?: AxiosResponseTransformer | AxiosResponseTransformer[];
      headers?: AxiosRequestHeaders;
      params?: any;
      paramsSerializer?: (params: any) => string;
      data?: D;
      timeout?: number;
      timeoutErrorMessage?: string;
      withCredentials?: boolean;
      adapter?: AxiosAdapter;
      auth?: AxiosBasicCredentials;
      responseType?: ResponseType;
      xsrfCookieName?: string;
      xsrfHeaderName?: string;
      onUploadProgress?: (progressEvent: any) => void;
      onDownloadProgress?: (progressEvent: any) => void;
      maxContentLength?: number;
      validateStatus?: ((status: number) => boolean) | null;
      maxBodyLength?: number;
      maxRedirects?: number;
      socketPath?: string | null;
      httpAgent?: any;
      httpsAgent?: any;
      proxy?: AxiosProxyConfig | false;
      cancelToken?: CancelToken;
      decompress?: boolean;
      transitional?: TransitionalOptions;
      signal?: AbortSignal;
      insecureHTTPParser?: boolean;
    }
    
    */

	return (<div></div>)
}

Fetch API 보다 axios가 좋은 점(https://tuhbm.github.io/2019/03/21/axios/)

• 구형브라우저를 지원합니다.(Fetch API의 경우는 폴리필이 필요합니다.)
• 요청을 중단시킬 수 있습니다.
• 응답 시간 초과를 설정하는 방법이 있습니다.
• CSRF 보호 기능이 내장되어있다.
• JSON 데이터 자동변환
• Node.js에서의 사용

 

 

fetch 사용 예제

fetch('요청 주소', '전송 옵션'); 	// 으로 사용
// 전송 옵션에는 header, method, body 등등이 있다.

// get방식은 default로 별도 옵션 필요없음
fetch('요청 주소')
	.then((res) => {})
    .catch(err) => {})
    
// post 방식은 전송 옵션을 설정해주어야 한다. 기존의 ajax 통신을 하던 방법과 유사하다.
fetch("요청 주소", {
  method: "POST",	// method만 PUT, DELETE 등으로 변경하여 보낸다. DELETE의 경우는 특별히 보낼 데이터가 없을 경우 method만 설정해도 된다.
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    key1: "value1",
    key2: "value2"
  }),
}).then((response) => console.log(response));