API와 JavaScript에서 API 호출 방법

너는 모든 사람이 이야기하고 있는 이 용어'API'가 도대체 무엇인지 생각해 본 적이 있니?아니면 사장님이 방금 또 다른'우리가 XYZ Api를 이 프로젝트에 집적하고 싶을 수도 있어요'를 던졌는데 Api가 도대체 뭐예요?영어로 설명해 주실 분 계세요?
걱정하지 마라. 내가 한번 해 볼게. 나는 네가 이미 어떤 모호한 방식으로 그것이 무엇인지 알고 있지만, 우리가 똑똑히 알 수 있도록 내기를 걸겠다.
먼저 API라는 단어 자체를 살펴보자.

API 대표 애플리케이션 프로그래밍 인터페이스
우리 먼저 단어를 분해하여 각각의 모든 성분을 이해합시다
어플리케이션 - 통신할 어플리케이션
프로그래밍 - 제어 또는 명령
인터페이스 - 통신 방식 - (예: 홈 스위치)

인터페이스

인터페이스를 한번 봅시다. 이것은 이곳의 주요 키워드입니다.그래서 인터페이스는 기본적으로 미리 정의된 통신 방식이거나 쌍방 통신의 매개체이다.
우리 전구의 간단한 예를 하나 들자.그것은 어떤 일을 해야 하는 물체로, 방을 밝게 비춰야 하지만, 언제든지, 어떤 방식으로든 하려고 해서는 안 된다.우리는 그것을 언제 열고 싶거나 언제 닫고 싶은지 알려줘야 한다.이를 위해, 우리는 스위치라는 인터페이스를 가지고 있는데, 이것은 우리가 전구와 이해할 수 있는 방식으로 전구에 우리가 무엇을 원하는지 알려주는 데 도움을 줄 수 있다.
따라서 스위치는 우리와 전구 사이의 인터페이스이다.

이와 유사하게 API는 일부 애플리케이션을 제어할 수 있는 인터페이스일 뿐입니다.일반적으로 소프트웨어 개발에서 이것은 프로그래밍(동사-설정/제어)이라고 불리기 때문에 이 인터페이스는 응용 프로그램 프로그래밍 인터페이스라고 불린다.
따라서 간단하게 말하면 API는 응용 프로그램과 통신하는 방식의 하나이다.
사실 프로그래밍에서 우리는 API를 사용해 왔고 심지어 우리가 API를 사용하고 있다는 것을 의식하지 못했다.우리가 작성한 첫 번째 JavaScript "콘솔"문장을 기억하십니까? 이것은 브라우저에서 온 API입니다!
웹 브라우저는 컨트롤러를 갖춘 응용 프로그램입니다.콘솔을 사용하여 콘솔에 내용을 쓰고 있다고 생각할 수도 있습니다.로그, 하지만 사실 우리는 실제로 콘솔에 직접 접근할 수 있는 권한을 얻지 못했다.이것은 브라우저의 속성입니다. 우리는 입력에서 명령을 작성할 수 있습니다. 예를 들어 브라우저는 내용을 컨트롤러에 출력할 수 있습니다.기본적으로 우리는 컨트롤러 API를 사용하여 브라우저에 무엇을 쓰는지 알려 줍니다.
그러니까 만세!😃, 이미 API를 사용하고 있으므로 자신에 대한 확신을 가질 수 있습니다.
이제 본문을 읽는 첫 번째 점으로 돌아가자. 자바스크립트에서 API를 사용하자.
현재 2019 관상바이러스 질병은 매우 핫한 화제이기 때문에 우리는 API를 찾아서 우리의 페이지에 그 데이터를 보여 주려고 한다.
Here is one such API (General Stats)
브라우저에서fetch라는 함수가 있습니다. 네트워크를 통해 외부 API를 호출할 수 있습니다.
그래서 첫 번째 단계는 API에서 데이터를 얻는 것이다. 이것이 바로 우리가 브라우저에 fetch 함수를 사용하도록 알려주는 일이다.

fetch("https://corona-virus-stats.herokuapp.com/api/v1/cases/general-stats");

fetch 함수는 응답 디테일을 해석하거나 오류가 발생했을 때 거부될 수 있는 promise 을 되돌려줍니다.

fetch("https://corona-virus-stats.herokuapp.com/api/v1/cases/general-stats")
            //Response resolves to a readable stream, 
            //so this statement helps us convert it into 
            //a static object
            .then(response => response.json()) 
            //Now that we have the data, let us see what it looks like in console
            .then(responseData => {
                console.log(responseData);
            });

위의 코드는 콘솔에서 다음과 같이 출력됩니다.

{
    "data": {
        "total_cases": "4,100,726",
        "recovery_cases": "1,441,474",
        "death_cases": "280,431",
        "last_update": "May, 10 2020, 01:29, UTC",
        "currently_infected": "2,378,821",
        "cases_with_outcome": "1,721,905",
        "mild_condition_active_cases": "2,331,138",
        "critical_condition_active_cases": "47,683",
        "recovered_closed_cases": "1,441,474",
        "death_closed_cases": "280,431",
        "closed_cases_recovered_percentage": "84.0",
        "closed_cases_death_percentage": "16.0",
        "active_cases_mild_percentage": "98.0",
        "active_cases_critical_percentage": "2.0",
        "general_death_rate": "7.000000000000001"
    },
    "status": "success"
}

우리가 받은 데이터는 JSON 형식이기 때문에javascript는 그 중에서 대상을 생성합니다. (이 경우 API가 어디에서 JSON 응답을 되돌려주든지 우리가 사용하는 API에 따라 달라질 수 있습니다.)
그래서 우리는 다른 대상을 사용하는 것처럼 이 응답 데이터를 사용할 수 있다. 이것은 컨트롤러에서 출력의 전체 사례를 얻는 방법이다.

console.log(responseData.data.total_cases);

좋습니다. 이제 API에서 데이터를 가져와 콘솔에 표시하는 방법을 배웠습니다.따라서 다음에 API라는 단어를 들었을 때 어떻게 사용하는지 알고 있다는 것을 기억하십시오. 이것은 단지 우호적인 URL일 뿐입니다. 응용 프로그램은 그것을 사용하여 데이터를 검색하거나 데이터를 보내거나 명령을 보낼 수 있습니다.
나는 웹 페이지에 데이터를 표시하는 것과 같은 어떤 추가적인 일도 언급하지 않았다. 만약 당신이 자바스크립트의 기본 지식을 알고 있다면, 그것은 상당히 쉬울 것이다.
이제 다른 API를 탐색하여 이력서에 추가합니다: P
fetch API는 브라우저 본체에서 얻을 수 있지만 제3자 라이브러리/조수, 예를 들어 axios, jQuery Ajax 등 다른 방법으로 API를 호출할 수 있습니다. 이러한 개념을 알고 계시다면 실현하기 어렵지 않을 것입니다. 문서만 보면 됩니다.당신도 할 수 있습니다 read a detailed comparison of libraries.
이 외에도 우리는 데이터를 API에 보내야 하고 많은 API에 대해 고객으로서 권한을 부여해야 한다.
다음 글에서 이러한 내용을 소개할 것입니다. 현재 사용 가능한 오픈 API를 사용하여 데이터를 얻을 수 있습니다. 예를 들어 JSON Typicode
너는 찾을 수 있다a good list of open APIs here.
이것은 저의 첫 번째 글입니다. 제가 이 글을 쓴 것은 한 친구에게 API를 설명하기 위해서입니다. 저는 이런 내용을 더 많이 만들기를 기대합니다.
만약 네가 이 문장이 도움이 된다고 생각한다면, 반드시 나에게 네가 또 무엇을 읽고 싶은지 알려줘야 한다.
신용:
twinsfisch 의 Unsplash 배전반 사진
Canva를 사용하여 편집한 이미지
끝까지 읽어줘서 고마워!