API 와 AJAX

<api>

api = 다른 곳의 데이터를 구하기 위한 통로

api에 데이터 전송 => 원하는 데이터를 얻음

api는 대부분 json // 소수 XML(구식)

 

<json>

1. json의 형식    무조건 "" // (not '')

{"asd" = "ddd"}

 

2. json.value의 종류

object, array, string, number, boolean, null (undefined 없다!XXXX)

 

3. json <=> js

json.parse // json => js

json.stringfy // js => json

 

<XML>

XML 써보기! (잘 안쓰는 방식)

arrow 안되고, Promise 안됨*

 

 

예시에 앞선 비트코인 가격 api

 

btc 가격 API를 활용한 예)

const req = new XMLHttpRequest();

req.onload = function () {

console.log("Success");

const btc = JSON.parse(this.responseText);

btcPrice = btc.data.amount;

console.log(btcPrice);

};

req.onerror = function () {

console.log("Error");

console.log(this);

};

req.open("GET", "https://api.coinbase.com/v2/prices/spot?currency=KRW");

req.send();

keyword = onload, onerror, open, send

 

<AJAX>

AJAX = Asynchronous JavaScript And XML (비동기 자바스크립트와 XML)

 

fetch는 XML상위호환

fetch는 자동으로 Promise를 반환 

fetch의 단점 = 데이터가 바로 나오지 않음 (parse해줘야 나옴) =>axios를 이용하면 데이터가 바로나온다!

JSON.parse 대신 .json()을 써줌

 

 

예시)

<1> then catch 활용

fetch("https://api.coinbase.com/v2/prices/spot?currency=KRW")

.then((res) => {

console.log("Success");

return res.json();

})

.then((data) => {

console.log("Data parsed");

console.log(data.data.amount);

})

.catch((e) => {

console.log("Error");

console.log(e);

});

<2> async await 활용

const fetchBTCPrice = async () => {

try {

const res = await fetch(

"https://api.coinbase.com/v2/prices/spot?currency=KRW"

);

const data = await res.json();

console.log(data.data.amount);

} catch (e) {

console.log("Error");

console.log(e);

}

};