// API, Application Programming Interface
- 컴퓨터가 여러 소프트웨어와 상호작용하거나 소통하는 모든 인터페이스를 의미
- 웹에서 사용하는 API > HTTP를 기반으로 하는 인터페이스인 WebAPI
// Ajax
- 비동기식 JavaScript와 XML
- JavaScript를 사용해서 앱을 만드는 기술
- 데이터를 전달하거나 받을 수 있다.
// QueryString
- url에 추가 정보를 넣기 위해 사용하는 url? 뒤에 키-값 쌍을 이루는 텍스트
~ https://url?키1=값1&키2=값2
- Ajax 통신 방법을 제공하는 API
- XHR
- Fetch API
- Axios
// XHR, XMLHttpRequest
- Ajax 요청을 생성하는 JavaScript API
- 효율이 떨어지는 방법으로, 요즘은 거의 사용하지 않는다.
- Promise를 지원하지 않아 수많은 콜백을 받아야 한다.
- 구문이 복잡하고 어렵다.
const req = new XMLHttpRequest();
req.onload = function () {
console.log('IT LOADED!!');
const data = JSON.parse(this.responseText);
console.log(data);
};
req.onerror = function () {
console.log('ERROR');
console.log(this);
};
req.open('GET', 'https://swapi.dev/api/people/1/');
req.send();// Fetch API
- Fetch 함수로 요청을 만들 수 있다.
- Promise를 지원한다.
- Fetch가 헤더를 수신하는 즉시 프로미스가 resolve 된다.
- 응답 객체의 본문이 ReadableStream이라서 자동으로 구문 분석되지 않기 때문에 응답이 json일 때는 .json()을 별도로 호출해주어야 한다.
fetch('https://swapi.dev/api/people/1/')
.then((res) => {
console.log('RESOLVED!', res);
return res.json();
})
.then((data) => {
console.log(data);
})
.catch((err) => {
console.log('ERROR!', err);
});// Axios
- HTTP 요청의 생성과 처리를 최대한 간소화할 목적으로 만들어진 라이브러리
> JavaScript의 네이티브 함수 X
- 사용하려면 import 해서 코드에 추가해야 한다.
> https://github.com/axios/axios#installing 참고
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Axios</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="axios.js"></script>
</body>
</html>
axios
.get('https://swapi.dev/api/people/1/')
.then((res) => {
console.log('RESPONSE: ', res);
})
.catch((error) => {
console.log('ERROR: ', error);
});
- 헤더에 담을 항목이 필요한 경우 config 변수(변수명 변경 가능)에 headers를 포함시키고 url과 함께 넘긴다.
const 변수명 = { headers: { 키: '값' } };
axios.get('url', 변수명);- 기본 get
const getStarWarsPerson = async () => {
try {
const res = await axios.get('https://swapi.dev/api/people/1/');
console.log(res.data);
} catch (e) {
console.log('ERROR', e);
}
};- header 세팅한 get
const getDadJoke = async () => {
const config = { headers: { Accept: 'application/json' } };
const res = await axios.get('https://icanhazdadjoke.com/', config);
};'클라이언트 > JavaScript' 카테고리의 다른 글
| [자바스크립트(JavaScript)] 팩토리 함수, 생성자 함수 (1) | 2023.11.28 |
|---|---|
| [자바스크립트(JavaScript)] Prototype(프로토타입), __proto__ (0) | 2023.11.27 |
| [자바스크립트(JavaScript)] 비동기 함수(Async Functions) (0) | 2023.11.24 |
| [자바스크립트(JavaScript)] Promise (0) | 2023.11.24 |
| [자바스크립트(JavaScript)] 콜 스택(Call Stack) (0) | 2023.11.23 |
