[JS] Async, Ajax, Axios

누노·2024년 3월 5일

JavaScript

React

목록 보기

4/6

Async

비동기 처리 방식
요청과 응답이 동시에 일어나지 않고 나중에 응답하는 것
전체 페이지를 다시 로딩하지 않고 필요한 부분만 업데이트하기 때문에 웹페이지의 속도와 성틍을 향상시킬 수 있음
서버와의 통신량이 줄어들고, 자원과 시간을 절약
요청과 응답이 동시에 일어나지 않아도 되기 때문에 요청을 보낸 후에 다른 작업 가능
<-> Sync(동기)
비동기를 처리하는 프로그래밍 3가지
- Callback
- Promise
- async/await

Ajax

Asnychronous JavaScript And XML
자바스크립트의 라이브러리 중 하나
자바스크립트를 이용해서 웹 서버와 비동기로 통신
HTML, XML, JSON 등의 다양한 형식의 데이터를 주고받음
웹 페이지가 로딩된 후에도 서버로부터 필요한 데이터만 요청하고 받아서 웹페이지를 동적으로 갱신 가능
웹 페이지의 일부분만을 업데이트 할 수 있으므로 전체 페이지를 새로고침하지 않아도 됨
화면 전환 없이 클라이언트와 서버간의 정보 교환 -> 웹페이지 속도 향상
동작 원리
1. 웹 브라우저에서 사용자의 요청이 발생하면, 자바스크립트로 XMLHttpRequest 객체 생성
2. XMLHttpRequest 객체는 서버에 비동기적으로 요청을 보냄
3. 서버는 요청을 처리하고 응답을 XML이나 JSON 형식으로 보냄
4. XMLHttpRequest 객체는 응답을 받아서 자바스크립트로 처리
5. 자바스크립트로 처리된 결과를 웹 브라우저에 반영
- jQuery 라이브러리
  - 서버로의 비동기 HTTP(Ajax) 요청을 보내기 위한 방법
  - 매우 유연, 다양한 HTTP 메소드 지원
```
  $.ajax({
    url : requestUrl,
    type : 'DELETE', // get, post, put, delete
    async : true, // default
    data : JSON.stringify(requestParam),
    dataType : "json",
    timeout : 10000, // 제한 시간 설정
    contentType : "application/json",
```

Axios 라이브러리

Promise 기반의 HTTP 클라이언트

```javascript
axios.get('https://example.com/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });
```

Axios

Node.js와 브라우저를 위한 Promise 기반 HTTP 비동기 통신 라이브러리
비동기로 HTTP 통신을 가능하게 해주고, REST API에 데이터를 요청할 때, promise 객체로 return 해주기 때문에 response 데이터를 다루기도 쉬움
요청(request), 응답(reply)을 JSON 형태로 자동 변경
npm install axios
import axios from "axios"
Request method
- GET : 리소스 조회
- POST : 리소스 추가, 등록
- PUT : 리소스 대체, 수정, 해당 리소스가 없으면 새롭게 생성
- DELETE : 리소스 삭제
- PATCH : 리소스 수정 (부분 변경)

참고

누노

🍄🧑‍🌾

이전 포스트

[React] ReactDOM

다음 포스트

[JS] Async, Ajax, Axios

React

Async

Ajax

Axios

참고

[React] ReactDOM

[JS] Callback, Promise, async/await

0개의 댓글