#TIL (May 17th, 서른두번째 이야기)

Jung Hyun Kim·2020년 5월 17일
0

Javascript API

-Applicaiton Programming Interface : is a set of commands, functions, protocols, and objects that programmers can use to create software or interact with an external system.

API

Endpoint

  • Endpoint of API는 URL이며, 그 URL을 다른 주소창에 치면, 브라우저에서 GET request를 통해 맞춘 내용을 출력함
https://api.kanye.rest

Paths

-narrow down specific data from server.

https://ddddd.net/programming//endpoint API에 특정 부분만 불러오겠다는 뜻 
https://ddddd.net/dark//예를 들어 해당 endpoint가 농담 API 사이트 이면, dark한 joke만 불러오겠다는 뜻

Parameters

  • customize data that we want from the server
https://sv443.net/jokeapi/v2/joke/Programming?contains=callback //위의 path이후에 '?'뒤에 붙여주는 더 specific 하게 필터해줘서 원하는 데이터를 가져오는것 

JSON(JavaScript Object Notation)

-객체를 만들때 사용하는 표현, 제일 많이 사용됨

JSON.parse() // 전달된 문자열을 자바스크립트의 데이터로 변환 

JSON.stringify() // 전달된 데이터를 문자열로 변환 

XMLHttp Request

function reqListener () {
  console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();

출처 : https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

여기서 받은 데이터를 javascript code 화 하기위해 JSON사용할 수 있다

const firstReq= new XMLHttpRequest();
firstReq.addEventListener('load', function () {
	console.log('It worked!');
  	const data = JSON.parse(this.responseText);
	console.log(data);
});
fistReq.addEventListener('error', () = {
  console.log('ERROR!!!!');
});
firstReq.open('GET,'https://swapi.co/api/planets/')
firstReq.send();
console.log('Request Sent!');

profile
코린이 프론트엔드 개발자💻💛🤙🏼

0개의 댓글