Javascript API
API란
Application Programming Interface(애플리케이션 프로그램 인터페이스)의 약자로, 소프트웨어 응용 프로그램에서 다른 소프트웨어 구성 요소 또는 서비스와 상호 작용하기 위한 인터페이스를 제공하는 프로그래밍 기술이다
EX) 약국에 두통약을 사러갔다고 과정했을때 우리는 약사에게 어떤 약을 달라고 요청을하게되고 약사는 그 요청에 따라 약을 찾아서 약을 건네주는 응답을 한다.
API의 종류
Ajax
Ajax(Asynchronous JavaScript And XML)의 약자로 Javascript를 사용한 비동기 통신, 클라이언트와 서버간에 데이터를 주고받는 기술이라고 할 수 있다.
여기서 비동기 Http통신이란 응답(response)와 요청(request)를 비동기 식으로 다룰 수 있다는것을 뜻하게되는데 예를들어 유튜브를 보고있을때 비동기가 지원되지 않는경우 우리가 댓글을 달게되면 페이지는 다시 렌더링되어 처음부터 영상을 다시봐야하는 상황이 발생하게 된다
Axios
Node.js와 브라우저를 통한 Promise API를 활용하는 HTTP 통신 라이브러리로 비동기로 HTTP통신이 가능하며 위의 Ajax에서는 제공되지 않는 return을 promise객체로 해주기 때문에 response데이터를 다루기 쉽다.
브라우저의 높은 호환성과 기능면에서 제일 많이 구현되어있어 API중에 제일 많이 사용된다.
그럼 Popmise객체는 무엇일까?
Promise객체: 어떤 작업에 관한 `상태 정보`를 갖고 있는 객체
작업이 진행중임을 의미하는 pending, 작업이 성공적으로 완료되었음을 의미하는 fulfilled, 작업이 실패했음을 의미하는 rejectedAxios 사용법
[GET요청] : 입력한 url에 존재하는 자원에 요청을한다, GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도이다. 주소에 있는 쿼리스트링을 활용해서 정보를 전달하는 것이지 GET메서드는 값이나 상태등을 바꿀 수 없다.
axios.get(url,[,config]
[POST요청] : 새로운 리소스를 생성(create)할 때 사용한다, 로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할때 사용한다. Post를 사용하면 주소창에 쿼리스트링이 남지 않기때문에 GET보다 안전하다.
axios.post("url주소",{data객체},[,config])
[Delete요청]: REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용된다, Delete메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않는다.
axios.delete("/thisisExample/list/30").then(function(response){ console.log(response); }).catch(function(ex){ throw new Error(ex) }
[Put요청]: REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신하는 목적으로 사용된다.
PUT메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있다.
axios.put(url[, data[, config]])
Fetch
ES6부터 들어온 Javascript 내장 라이브러리로 axios와 마찬가지로 Promise 기반으로 만들어져 데이터 다루기가 쉽다
Axios에 비해 기능이 부족하며 브라우저 호환이 낮다.
- Fetch API 사용법
fetch(url, options) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.log('Error:', error));
url
: 필요한 리소스의 URLoptions
: 요청에 대한 설정, 메소드(GET, POST 등), 헤더, 본문 등을 지정할 수 있다response.json()
: fetch는 HTTP 응답을 나타내는 Response 객체를 반환.json()
메소드는 이 응답을 JSON 형태로 파싱한다catch
: 네트워크 요청에 문제가 생길 경우를 대비해 에러 핸들링을 한다