[Javascript]API 호출하기

API 호출 하는 방법

정석적인 기본 코드

const callAPI = async() => {
    let url = new URL(`url주소`)
    let header = new Header({헤더내용})
    let response = await fetch(url, {headers:header})
    let data = await response.json()
   }

 

API를 호출하는 방식은 ajax,axios,fetch가 있다.

(ajax, axios는 나중에 쓰면서 배워보자...)

 

promise

자바스크립트에서 비동기 동작을 다루는 하나의 패턴

 

여기서 비동기 동작이란?

정의) 자바스크립트에서 비동기 동작이란 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미한다.

 

자바스크립트는 single thread, 즉 작업을 하나씩만 수행 할 수 있는 언어이지만 이벤트 루트를 통해서 비동기 처리를 할 수 있다.  예를 들어 setTimeout은 브라우저의 다른 비동기 함수들(addEventListener, XMLHttpRequest)이나 node.js를 모든 비동기 방식의 api들 처럼 이벤트 루프를 통해 콜백함수를 실행한다.

 

setTimeout(function() {
  console.log("Hello");
}, 0);
console.log("안녕하세요");

//결과는 안녕하세요 -> Hello 순으로 찍힌다.

비동기 처리는 Ajax로 데이터를 불러오기 전에 바로 다음 코드를 실행시켜 오류를 발생시킬 수 있다. 이전에는 이 문제를 해결하기 위해서 콜백함수를 이용했다.

(콜백함수는 예약과 같다. 예약시간 전까지 무엇을 하던 그 시점에 원하는 동작을 수행할 수 있다. 

=> 이 비유가 가장 적합한 것 같다. 콜백함수에 대해 이해가 전혀 안됐을 때 이 글을 보고 이해가 됐다!)

 

$.ajax("http://api.newscatcher.com/v2/search", (result)=>{
	console.log(result);
});

위 url이 호출되고 결과가 나오면 두번째 매개변수인 콜백함수를 불러서 result에 결과값을 넘겨준다.

하지만 콜백함수 흔히 "콜백 지옥"이라고 불리는 상당히 지저분하고 복잡해지는 코드를 만들어낸다.

call1(function (err, data) {
    if (err) {
        return;
    }
    call2(function (err, data) {
        if (err) {
            return;
        }
        call3(function (err, data) {
            if (err) {
                return;
            }
            call4(function (err, data) {
                if (err) {
                    return;
                }
				call5(function (err, data) {
					//...
            	});
            });
        });
    });
});

그래서 이 문제를 해결할 수 있는 Promise가 등장했다.

Promise의 구조이다.

fuction delayP(sec){
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve("success");
        }, sec*1000);
    });
}

new Promise를 이용해서 promise를 생성하고 promise 안에서는 resolve와 reject함수를 자동으로 갖는다.

resolve는 결과가 문제없이 성공적으로 수행될 때 호출하는 함수,

reject는 중간에 에러가 나면 에러를 처리할 수 있는 함수

resolve가 호출이 되면 죽음의 콜백 대신, then()이나 async/await을 이용하여 그 결과값을 받아서 다른일을 할 수 있다.

 

async와 await

동기적인 자바스크립트를 비동기적으로 처리하기 위해 씀

fetch는 promise를 리턴한다. promise 속에서 api호출이 이뤄진 다음 데이터를 받아서 promise가 성공적으로 resolve함수를 호출하기를 기다리는 것이다. 기다릴 때 await이 꼭 필요하다. await이 없으면 promise자체를 리턴한다.

await을 쓰려면 함수를 async로 선언해줘야한다. 즉 async와 await은 세.트.

그리고 async로 함수를 선언하면 그함수는 자동으로 promise를 반환한다.

 

json

서버 클라이언트 통신에서 많이 쓰인느 데이터 타입(png, jpg와 같이 어떤 데이터의 타입이라고 생각하자

객체랑 똑같이 생긴 텍스트라고 이해하자.

간단한 텍스트인데 객체랑 똑같아서 나중에 읽어오기 편하기 때문에 쓰인다고 한다.

그래서 json타입이 서버통신시 많이 사용됨.

let response = await fetch(url)
let data = await response.json()

이것은 세.트.

 

 

내가 뉴스 페이지를 만들었던 코드를 예시로 이해해보자.

const getNews = async() => {
    let url = new URL(`api공유사이트에서 제공하는 url`);
    let header = new Headers({'x-api-key' : 'api사이트에서 제공하는 key값'});
    //x-api-key도 사이트에서 제공하는 내용
    url.searchParams.set("page":page);
    //url에 페이지 이동에 필요한 page를 추가하는 작업
    let respose = await fetch(url,{headers: header});
    let data = await response.json();
}

URL.searchParams.set()

정의 : 지정된 검색 매개변수와 연관된 값을 지정된 값으로 설정할 수 있고, 값이 여러개면 나머지는 삭제한다.

예를 들면  page:1에서 다음 페이지로 넘어가서 page:2의 뉴스 내용을 보고싶다.

그러면 url에 page라는 parameter를 추가해서 그 url에 맞는 내용을 제공받는 것이다.

 

참고:

https://velog.io/@allsilver94/API-%EB%B6%80%EB%A5%B4%EA%B8%B0

https://kku-jun.tistory.com/19