2021.03.13
공부한 내용
- Axios
- Fetch API
Axios
Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.
vue에서 공식적으로 권장하는 HTTP 클라이언트 라이브러리이다.
Promise 기반의 자바스크립트 비동기 처리 방식을 사용하며, IE8 이상을 포함한 모든 최신 브라우저를 지원한다. (문서화가 잘되어 있고 API가 다양하다.)
기능
- 브라우저 환경에서 XMLHttpRequests 요청 생성
- Node.js 환경에서 http 요청 생성
- Promise API 지원
- 요청/응답 차단(Intercept)
- 요청/응답 데이터 변환
- 요청 취소(request aborting)
- JSON 데이터 자동 변환
- 사이트 간 요청 위조(CSRF) 보호를 위한 클라이언트 사이드 지원
- 응답 시간 초과를 설정하는 방법 존재
설치
CDN방식
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>NPM
$ npm install axios
OR
$ yarn add axios사용법
라이브러리를 설치하고
axios라는 변수에 접근할 수 있고,axios변수를 이용해서HTTP Methods로 통신한다.
모든 요청에서 선택적으로config객체를 2번째 인자로 추가할 수 있다.
GET요청
서버에서 데이터를 가져올 때 사용
axios.get(url, [,config]);
두 번째 인자인 config 객체에 요청값을 같이 넘길 수 있다.axios.get('통신할 서버주소', { params, // 사용할땐 {} 안에 작성한다. //params는 요청과 함꼐 전송 될 URL 매개 변수이다. 일반 객체 이거나 URLSearchParams 객체여야 한다. headers, // 사용할땐 {} 안에 작성한다. timeout: 응답초과시간 // 해당시간안에 응답이 오지않는다면 에러처리된다. })
//예제
const axios = require('axios');
// ID로 사용자 요청
axios.get('/user?ID=12345')
//axios.get('/user', { params : { ID: 12345 } } ) 위코드와 동일
// 응답(성공)
.then(function (response) {
console.log(response);
})
// 응답(실패)
.catch(function (error) {
console.log(error);
})
// 응답(항상 실행)
.then(function () {
// ...
});Async/await를 사용할 경우 오류 디버깅을 위해 .then / .catch가 아닌 try...catch구문을 사용
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}POST요청
서버에 값을 입력할 때 사용
axios.post("url",{
data객체
},[,config])
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.
DELETE요청
서버에 있는 특정 데이터를 삭제
axios.delete('/서버url/삭제할 특정 값')
axios.delete(URL,[,config]);PUT요청
서버에 있는 특정 데이터를 수정
axios.put('url', {변경하고자 하는 값})
axios.put(url[, data[, config]])axios.get(url[, config]) - get의 경우(불러오기)
axios.post(url[, data[, config]]) - post의 경우(입력하기)
axios.put(url[, data[, config]]) - put의 경우(수정하기)
axios.delete(url[, config]) - delete의 경우(삭제하기)
GET : 조회
POST : 생성
DELETE : 삭제
PUT : 수정
API
config 설정을 axios()에 전달하여 요청할 수 있다.
axios(config)
예시
// POST 요청 전송
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
// GET 요청
axios({
method:'get',
url:'http://bit.ly/2mTM3nY',
responseType:'stream'
})HTTP 메서드 별칭
지원되는 모든 HTTP요청 메서드에 별칭이 제공된다.
axios.get(url[, config]) // GET
axios.post(url[, data[, config]]) // POST
axios.put(url[, data[, config]]) // PUT
axios.patch(url[, data[, config]]) // PATCH
axios.delete(url[, config]) // DELETE
axios.request(config)
axios.head(url[, config])
axios.options(url[, config])별칭 메서드(get, post, put, delete 등등)를 사용하면 설정(config)에서
url,method,data속성을 지정할 필요가 없다.axios({ url: '/user/12345', method: 'put', data: { firstName: 'Fred', lastName: 'Flintstone' } }) //위 코드를 별칭 메서드를 사용하면 아래처럼 작성한다. axios.put('/user/12345', { firstName: 'Fred', lastName: 'Flintstone' })
추가적인 구성 옵션(config)들은 여기를 참고 하세요!
Fetch API
fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환합니다. 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject합니다.
특징
- 자바스크립트의 내장 라이브러리이기 때문에
import를 하지 않고 사용 가능하다. fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스가 반환된다. 반환되는 프라미스는fetch()를 호출하는 코드에서 사용fetch에는fetch()메서드 하나와Headers,Request,Response,Body4가지의 인터페이스가 존재한다.
사용법
url- 접근하고자 하는 URLoptions- 선택 매개변수, method, header 등을 지정(options을 입력하지 않으면 기본적으로GET메서드로 진행된다.)
기본문법
fetch(url, [options]) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error))
fetch()는 구식 브라우저에선 지원하진 않지만(폴리필을 쓰면 사용 가능) 대부분의 모던 브라우저가 지원합니다.
fetch 실행과정
응답은 대개 두 단계를 거쳐 실행된다.
1단계
서버에서 응답 헤더를 받자마자 fetch호출 시 반환된 promise가 내장 클래스 Response의 인스턴스와 함께 이행 상태가 된다.
이 단계는 아직 body가 도착하기 전이지만, 개발자는 응답 헤더를 보고 요청이 성공적으로 처리되었는지 아닌지를 확인할 수 있다.
네트워크 문제나 존재하지 않는 사이트에 접속하려는 경우같이 HTTP 요청을 보낼 수 없는 상태에선 프라미스는 거부상태가 된다.
HTTP 상태는 응답 프로퍼티를 사용해 확인할 수 있다.
status– HTTP 상태 코드(예: 200)ok– 불린 값. HTTP 상태 코드가200과 299사이일 경우true
let response = await fetch(url);
if (response.ok) { // HTTP 상태 코드가 200~299일 경우 true 반환
// 응답 본문(body)을 전달 받는다.
let json = await response.json();
} else {
alert("HTTP-Error: " + response.status);
}2단계
추가 메서드를 호출해 응답 본문(body)을 받는다.
response에는 프라미스를 기반으로 하는 다양한 메서드 존재, 이 메서드를 통해서 다양한 형태의 응답 본문 처리를 할 수 있다.
-
response.text()– 응답을 읽고 텍스트를 반환 -
response.json()– 응답을 JSON 형태로 파싱 -
response.formData()– 응답을FormData 객체형태로 반환 -
response.blob()– 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환합니다.JavaScript에서Blob(Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용한다.
대개 데이터의 크기(Byte) 및 MIME 타입을 알아내거나, 데이터 송수신을 위한 작은Blob 객체로 나누는 등의 작업에 사용한다. -
response.arrayBuffer()– 응답을 ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태로 반환 -
이 외에도
response.body가 있는데,ReadableStream 객체인response.body를 사용하면 응답 본문을 청크 단위로 읽을 수 있습니다. 자세한 용례는 곧 살펴보겠습니다.ReadableStream인터페이스는 바이트 데이터를 읽을수 있는 스트림을 제공합니다.Fetch API는 Response 객체의 body 속성을 통하여 ReadableStream의 구체적인 인스턴스를 제공합니다.
MDN문서
중요!!
2단계인 본문을 읽을 때 사용되는 메서드는 하나만 사용할 수 있다.
만약response.text()를 사용해서 응답을 텍스트 형태로 얻었다면 본문의 내용은 모두 처리 된 상태이기 때문에 다음에 다른 메서드는 동작하지 않는다.let text = await response.text(); // 응답 본문이 소비됩니다. let parsed = await response.json(); // 실패
Headers
헤더는
response.headers에 맵과 유사한 형태로 저장
헤더 객체는 Key와 Value로 이루어진 multi-map이다.
Request(요청)와 Response(응답)의 Headers instance를 생성할 수 있다.
메타정보가 들어간다.
let headers = new Headers();생성한 Header에 속성들을 추가, 제거, 조회할 수 있다.
사용가능한 메서드 종류
append()delete()entries()forEach()get()has()keys()set()values()getAll()
응답 헤더
let response = await fetch('url');
// 헤더 일부를 추출
alert(response.headers.get('Content-Type')); // application/json; charset=utf-8요청 헤더
headers옵션을 사용하면 fetch에 요청 헤더를 설정할 수 있다.
let response = fetch(Url, {
headers: {
"Content-Type": "application/json",
Authentication: "secret"
}
});Request
Request instance는 요청 headers의 properties를 포함한다.
요청할 때의 값으로 URLm Body값 등을 설정하여 전달한다.
설정 옵션
method- 사용할 메소드를 선택 (GET, POST, PUT, DELETE 등등)headers- 헤더에 전달할 값body- 바디에 전달할 값mode- cors 등의 값을 설정 (cors, no-cors, same-origin)cache- 캐쉬 사용 여부 (no-cache, reload, force-cache, only-if-cached)credentials- 자격 증명을 위한 옵션 설정(include, same-origin, omit) (Default. same-origin)
Response
fetch를 호출하면 가져올 수 있는 객체
Response.status— HTTP Response Code를 담고 있다, 기본값 200Response.statusText— HTTP Status 코드의 메서드와 일치하는 문자열, 기본값은 "OK"Response.ok- 프로퍼티에서 사용한 HTTP Status 코드가 200에서 299중 하나임을 체크하는 값,(200~299중 하나이면 true 반환)
Body
mixin타입이라 한다. Request, Resposne 둘다 Body를 가지고 있다. body는 아래에서 기술한 타입들 중 하나로 설정할 수 있다.
ArrayBufferArrayBufferView(Uint8Array같은 TypedArray)Blob/File문자열URLSearchParamsFormData
사용 가능한 메서드
Body.arrayBuffer()Body.blob()Body.formData()Body.json()Body.text()
GET 호출
fetch()함수는 디폴트로 GET방식으로 동작한다. 옵션 인자가 없는 경우 GET으로 동작(GET은 옵션인자가 필요 없다)
fetch("https://jsonplaceholder.typicode.com/posts/1").then((response) =>
console.log(response)
)응답 객체를 통해 응답 상태 체크 -> 200 ok
Response {status: 200, ok: true, redirected: false, type: "cors", url: "https://jsonplaceholder.typicode.com/posts/1", …}POST호출
method– HTTP 메서드(예: POST)body– 요청 본문으로 다음 항목 중 하나이어야 합니다.
- 문자열(예: JSON 문자열)
-FormData객체–form/multipart형태로 데이터를 전송하기 위해 쓰입니다.
-Blob나BufferSource– 바이너리 데이터 전송을 위해 쓰입니다.
-URLSearchParams– 데이터를x-www-form-urlencoded형태로 보내기 위해 쓰이는데, 요즘엔 잘 사용하지 않습니다.
let user = {
name: 'John',
surname: 'Smith'
};
let response = await fetch('/article/fetch/post/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'//본문이 json일때
//'Content-Type': 'text/plain;charset=UTF-8' 본문이 문자열일때
},
body: JSON.stringify(user) //자바스크립트 객체를 JSON문자열로 변환
});
let result = await response.json();
alert(result.message);응답 객체를 통해 응답 상태 체크 -> 201 Created
Response {type: "cors", url: "/article/fetch/post/user", redirected: false, status: 201, ok: true, …}PUT호출
PUT 방식은 method옵션만 PUT으로 설정한다는 점을 빼면 POST방식과 매우 비슷하다.
fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
title: "Test",
body: "testing!",
userId: 1,
}),
})
.then((response) => response.json())
.then((data) => console.log(data))DELETE호출
DELETE방식에서는 보낼 데이터가 없기 때문에 headers와 body옵션이 필요 없다.
fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: "DELETE",
})
.then((response) => response.json())
.then((data) => console.log(data))Fetch Axios
Fetch
const url ='http://localhost3000/test`
const option ={
method:'POST',
header:{
'Content-Type':'application/json';charset=UTP-8'
},
body:JSON.stringify({
name:'test',
UserId:1
})
fetch(url,options)
.then(response => console.log(response))Axios
const option ={
url ='http://localhost3000/test`
method:'POST',
header:{
'Content-Type':'application/json';charset=UTP-8'
},
data:{
name:'test',
UserId:1
}
axios(options)
.then(response => console.log(response))fetch()는 body속성을 사용하고,axios는 data속성을 사용fetch는 url이fetch()함수의 인자로 들어가고,axios는 url이option객체에 들어간다.fetch에서 body부분은stringify()을 사용해서 json형태로 변환해야 하지만axios는 json으로 자동변환 해준다.
참고사이트
