[jquery] Axios와 Fetch

// 최상단에 jquery를 추가해주자

1. 정의

🐲AJAX (Asynchronous JavaScript and XML)
Ajax는 브라우저에서 비동기적으로 서버와 데이터를 주고받기 위해 사용되는 기술이다. Ajax는 주로 XMLHttpRequest 객체를 사용하여 구현하며, XML, JSON, HTML 등의 데이터를 처리할 수 있다.
 
🐲 Axios
Axios는 자바스크립트의 HTTP 클라이언트 라이브러리로, 비동기 HTTP 요청을 더 간편하게 처리할 수 있도록 도와준다.
🐲 Fetch
fetch는 자바스크립트의 내장 함수로, 브라우저에서 비동기 HTTP 요청을 보내기 위해 사용된다.
 
 

2. 사용법

🐲 Ajax

참고: [jquery] ajax()

[jquery] ajax()

 

🐲 Axios

Axios는 설치가 필요하며, API 사용이 간편하다.

axios.get('https://api.example.com/data')
    .then(response => { //sucess
        console.log(response.data);
    })
    .catch(error => { //fail
        console.error('오류:', error);
    });

 

예제

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

• Axios 라이브러리를 외부 CDN에서 가져와서 사용한다. 이를 통해 별도의 설치 없이 Axios를 사용할 수 있다.

document.addEventListener("DOMContentLoaded", () => {}

• 위 코드는 window.onload= function() {}와 같은 역할을 하여 DOM을 준비한다.

DOM알아보기

[jquery]jquery 사용하기

[jquery]jquery 사용하기

 

axios({
  url: imgurl,
  method: 'GET',
  responseType: 'blob'
})

• url: 요청할 이미지 파일의 URL (imgurl)이다.
• method: HTTP 메서드로 GET을 사용하여 데이터를 서버로부터 가져온다.
• responseType: 'blob': 서버에서 이미지를 가져올 때, 이미지 데이터를 바이너리 형태인 blob으로 처리하겠다고 지정한다. 이를 통해 이미지를 파일 형태로 다룰 수 있다.

.then(function(res){ const url = URL.createObjectURL( new Blob ([res.data]) ) })

• res: 서버로부터 받은 응답 데이터가 담긴 객체이다. 이 데이터는 blob 형태로 전달되며, res.data에 이미지 데이터가 담긴다.
• new Blob([res.data]): res.data로 받은 바이너리 데이터를 Blob 객체로 감싼다. Blob은 파일 같은 불변 데이터를 다루기 위한 객체다.
• URL.createObjectURL(): Blob 객체를 브라우저에서 사용할 수 있는 URL로 변환한다. 이 URL은 메모리에서 생성된 가상 URL로, 브라우저 내부에서만 유효하다.

const link = document.createElement('a'); //a tag를 추가한다.
link.href = url
link.setAttribute('download', 'sample.png')
document.body.appendChild(link)

console.log(link) //blob:http://localhost:8080/0a7634e3-e5a9-46ec-a802-9830387b6fe1
link.click() //클릭되면 이미지가 다운로드됨.

• <a> 태그에 download 속성을 추가하고, 다운로드될 파일의 이름을 'sample.png'로 설정한다.

.catch(function(err){
	console.log(err)
})

• Axios 요청이 실패했을 때 에러 정보를 콘솔에 출력한다.

---

🐲 Fetch

기본문법

fetch('https://api.example.com/data')
    .then(response => { //success
        if (!response.ok) {
            throw new Error('네트워크 응답이 좋지 않습니다.');
        }
        return response.json();
    })
    .then(data => { //success
        console.log(data);
    })
    .catch(error => { //fail
        console.error('오류:', error);
    });

• fetch는 네트워크 오류 외에도 HTTP 상태 코드가 4xx나 5xx일 때는 에러로 처리되지 않는다. 따라서 response.ok를 확인하여 에러를 수동으로 처리해야 한다.

 
예제

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

const getData = async (div1El, num) => {
  let obj = await fetch('https://reqres.in/api/products/' + num); 
  // fetch 함수를 사용하여 지정된 URL에서 데이터를 요청될 때까지 기다림.
  obj = await obj.json();   // obj가 JSON 형식으로 변환될 때까지 기다림.
  console.log(obj);
  div1El.innerHTML = display(obj);
  return data;
}

 

• fetch 사용: 
  • 'https://reqres.in/api/products/' + num: API 엔드포인트에 num 값을 추가하여 특정 제품의 데이터를 요청한다.
  • await fetch(...): fetch 함수가 완료될 때까지 기다린다. fetch는 기본적으로 Promise를 반환하며, 이 Promise가 해결될 때까지 기다린다.
• JSON 변환:
  • await obj.json(): 응답 객체를 JSON 형식으로 변환한다. await대신 async을 쓸 수 있다.
• 반환 값:
  • return data;: 함수가 data 변수를 반환한다.

getData(div1El, numEl.value);

 
 

• fetch를 통해 지정된 API 엔드포인트로 GET 요청을 보낸다.
• 요청이 완료되면 응답을 JSON 형식으로 변환한다.
• 변환된 데이터를 display 함수를 통해 HTML로 변환하고, msg를 div1El에 삽입하여 화면에 표시한다.

---

3.요약

 

	Ajax	Axios	fetch
비동기 처리 방식	콜백 기반의 비동기 처리 방식	Promise 기반으로 비동기 처리 .then()과 .catch()를 사용	Promise 기반으로 비동기 처리 .then()과 .catch()를 사용
데이터 처리	수동으로 JSON으로 변환하거나 XML 파싱	자동	response.json() 메서드를 호출
요청 취소	수동으로 구현	내장	AbortController를 사용
오류 처리	네트워크 오류 및 HTTP 상태 코드 수동 처리	200이 아닐경우 catch 메서드에서 처리	response.ok를 사용하여 수동으로 오류를 처리
기본값 설정	각 요청마다 수동으로 설정	전역적으로 설정	각 요청마다 수동으로 설정
브라우저 지원	모든 주요 브라우저에서만 지원(서버 측(node.js) 지원x)	최신 브라우저와 Node.js 환경	node.js,IE를 제외한 대부분의 최신 브라우
편의성	설정 복잡, 코드 길어질 수 있음	문법이 직관적이고 코드가 간결	별도의 설치 없이 코드가 간결하지만 추가 처리 필요