바스키아
API 연동에 관하여(axios) 본문
axios란?
->Promise 기반의 API 형식이라고 하더라...
그럼 Promise? -> Promis란 비동기 로직 처리에 유용한 자바스크립트 객체이다
비동기란 그럼?? -> 솔직히 이거모르면... 따로 검색해야....
커뮤니티에서는 자바스크립트의 꽃은 비동기라고도 하더라...쩝...
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!--vue -->
<!--엑시오스 CDN -->
<title>Http 통신, 뷰 리소스</title>
</head>
<body>
<div id="app1">
<button v-on:click="getData"> 호출 </button>
</div>
<script>
new Vue({
el: '#app1',
methods:{
getData: function(){
.then(function(response){
alert(response);
console.log(response); // 객체 형태로 반환. 파싱작업 불필요
});
}
}
});
</script>
</body>
</html>
|
script로 axios스트립트를 import해서
axios.get(url -> json 파일을 불러오고있다..)
============================================================================
리액트에선 ts 파일로 정리해서
ts 파일에서...
|
1
|
import axios, {AxiosRequestConfig} from "axios"
|
아시오스 호출해서
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
public static getPost(url:string , parameter: any | null ):any{
const ajaxconfig:AxiosRequestConfig = {
headers: {
'content-Type': 'application/json;charset=UTF-8'
}
};
if( parameter == null){
}else{
}
}
|
요런 메소드를 작성하여 클래스를 export 시켜
|
1
|
const resultData: any = await Searvice.getPost("manage/getManageList.do", this.temporary);
|
요론식으로 불러서 쓰고있다...ㅎㅎㅎ
즉 Axios는 REST API를 요청할때 Promise로 처리할수 있게 해주는 라이브러리이다
또 REST API가 뭐냐 물어본다면... 구글링 하라는 수밖에...하지만 블로그에 찾아와준 이상 간단하게 말하면
*서버와 클라이언트가 소통하는 방식이라고 생각하면된다. 방식은 여러가지 있지만 HTTP 메서드라는 것을 사용해서
구분을 한다. (대표적으로 GET POST PUT DELETE 등이 있는데 위에는 post를 쓴것을 확인할수 있다 ㅎㅎ)