노드에서 API를 가져옵니다.날씨 API 포함 js

사진은 Mia Anderson 에서 Unsplash
나는 이것이 JS 또는 웹 개발에서 가장 중요한 주제라고 생각한다.개발자로서 우리의 업무의 일부분은 백엔드를 사용하고 데이터베이스나 인터넷에서 정보를 얻는 것이다.따라서fetch를 이해하는 것은 모든 웹 개발자에게 매우 중요하다.이 강좌를 만드는 것은 단지 당신이 다음 프로젝트에서 사용할 수 있도록fetch API와async/await를 사용하기 시작하도록 하기 위해서입니다.
Fetch API는 웹 브라우저에서 비동기식 HTTP 요청을 보내는 가장 간단한 방법 중 하나입니다.이것은 JS 약속을 사용하여 브라우저에서 요청할 때 더욱 유연한 기능을 제공합니다.Fetch 방법은 우리가 이용할 수 있도록 약속을 되돌려줍니다.그리고 () 및.catch () 방법으로 응답을 처리합니다.
이것은 노드에서 요청을 얻는 예입니다.js.vanilla JS에 대해 본 강좌의 두 번째 부분과 같은 내용을 적용할 수 있습니다.fetch는 vanilla JS에서 이미 만들어진 것이기 때문에 npm 패키지를 설치할 필요가 없습니다.

1. 설치 노드 픽업 패키지

우리는 우선 디렉터리를 만들고 같은 디렉터리에서 npm 프로젝트를 시작한 다음javascript 파일을 만들어야 합니다.

mkdir weather-app
npm init -y
touch app.js

"node fetch"npm 패키지를 설치하고 있습니다.

npm i node-fetch --save

응용 프로그램에서js 파일은 패키지를 가져와야 합니다. 패키지를 가져오기 위해서는require 문구를 사용해야 합니다. 아래와 같습니다.

const fetch = require("node-fetch");

이제 우리는fetch 모듈을 사용할 수 있습니다.

2. Openweathermap API에서 날씨 정보 얻기

프레젠테이션을 위해 Openweathermap API를 사용합니다.무료로 사용하면 등록here하고 account page로 이동하여 API_키를 얻을 수 있습니다.
현재, 우리는fetch 방법에서 URL을 전달하여 http 요청을 보낼 수 있습니다.
우선, API 호출이 유효한지 확인하고 컨트롤러에 데이터를 기록하는 간단한 요청을 보낼 것입니다.
하지만 우선 코드가 어떻게 실제로 작동하는지 봅시다.
우리는fetch에서 URL을 전달합니다. 따라서 우리의 URL과 API가 정확하면 우리가 필요로 하는 모든 정보를 포함하는 응답 대상을 되돌려줍니다.잘못된 URL이나 API 키를 전달하면 오류 대상을 얻을 수 있습니다.

url: Inside 획득?API 끝점입니다.

?q:q는 조회를 대표합니다. 조회에서 우리는 도시 이름을 전달할 수 있기 때문에 이 도시에 대한 정보를 얻을 수 있습니다.이 예에 대해 나는 도시를 멍메이로 하드코딩했다.잠시 후, 사용자로부터 도시 이름을 동적으로 얻을 수 있습니다.나의githubrepo 링크는 참고할 수 있습니다.

& 단위: 섭씨나 화씨도와 같은 측정 단위입니다.

APP_ID: API 키입니다.

이 함수는 우리가 사용할 약속을 처리하기 위해 약속을 되돌려줍니다.then () 은 약속을 해석한 후에 사용할 수 있는 방법으로 리셋됩니다.해결을 약속하는 것은 성공을 요청하는 것을 의미하고 잘못이 없다는 것을 의미한다.이것catch () 방법은 요청이 해결되지 않았을 때만 거부된 상황을 처리합니다. 이 방법은 의 코드 블록을 되돌려줍니다.catch () 메서드.나는 안에서 ARrow 함수를 리셋 함수로 사용했다.그리고 받아라.

간단한 검색 예:

fetch(
    "https://api.openweathermap.org/data/2.5/weather?q=mumbai&units=metric&APPID=YOUR_KEY"
)
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((err) => console.log(err));

다음 명령을 실행할 수 있습니다.

node app.js

만약 모든 것이 순조롭다면, 당신은 컨트롤러에서 이 응답을 받을 것입니다. 이것은 JS 대상이기 때문에 우리는 필요에 따라 정보를 추출하여 전방에 보여줄 수 있습니다.
성공적인 응답:

{
  coord: { lon: 72.85, lat: 19.01 },
  weather: [ { id: 721, main: 'Haze', description: 'haze', icon: '50d' } ],
  base: 'stations',
  main: {
    temp: 31.49,
    feels_like: 34.13,
    temp_min: 31,
    temp_max: 32,
    pressure: 1006,
    humidity: 70
  },
  visibility: 5000,
  wind: { speed: 5.7, deg: 300 },
  clouds: { all: 40 },
  dt: 1599127310,
  sys: {
    type: 1,
    id: 9052,
    country: 'IN',
    sunrise: 1599094455,
    sunset: 1599139321
  },
  timezone: 19800,
  id: 1275339,
  name: 'Mumbai',
  cod: 200
}

키가 틀리면 다음과 같은 오류가 발생합니다.

{
  cod: 401,
  message: 'Invalid API key. Please see http://openweathermap.org/faq#error401 for more info.'
}

우리는 개발 컨트롤러에서try-catch 블록을 사용하여 오류를 포착하고 의미 있는 전체 응답을 되돌려주는 방법을 더욱 이해할 것이다.

3. 비동기식/대기:

javascript에서 약속을 처리하는 데 사용되는 특수한 문법이 있습니다. 즉, 비동기/대기

async: 그것을 실현하기 위해 우리는 함수 앞에서 async를 사용해야 한다. 이것은 함수가 시종일관 약속을 되돌려준다는 것을 의미한다.반환값은 약속에 자동으로 포장됩니다.간단하게 말하면, 비동기 함수는 우리의 함수가 약속을 되돌릴 수 있도록 보장한다.

await: 비동기 함수 내부에서만 작동합니다.wait 키워드는 자바스크립트가 약속이 해결되기를 기다리고 그 자체로 되돌아오게 합니다. 이것은 JS가 약속이 해결되거나 거부되기를 기다린다는 것을 의미합니다.

이제 우리의 예시로 돌아가서, 이 함수는fetch가 호출한 응답, 즉 해석된 약속 (유효한 날씨 정보를 가진 대상) 이나 거부된 약속 (오류 대상) 을 되돌려주는 새로운 함수를 만들고 있습니다.
첫 번째 방법에서fetchis 응답이 해결될 때까지wait를 사용합니다.
함수 실행은await를 호출하는 줄에서 멈추고 해결을 약속한 후에 계속됩니다.JavaScript 엔진은 다른 스크립트 실행, 이벤트 처리 등 다른 작업을 동시에 수행할 수 있기 때문에 CPU 자원이 필요하지 않습니다.
마지막으로, 우리는 단지 getWeather 방법을 호출할 뿐이다.

비동기식 대기 중 가져오기 사용:

async function getWeather() {
    const weather = await fetch(
        "https://api.openweathermap.org/data/2.5/weather?q=mumbai&units=metric&APPID=YOUR_KEY"
    );
    let response = await weather.json();
    console.log(response);
}

getWeather();

IFFIE 예: (즉시 호출되는 함수 표현식)

말 그대로 이 함수는 즉시 호출될 것이다.이상을try-And-catch 블록으로 처리했습니다.이것은 날씨 정보를 변수에 저장하는 것을 대체하고, 우리는 직접 URL을 사용하여 캡처할 수 있다.우리는 응답 대상의 특정 정보를 사용하여 데이터를 기록하는 것이 아니라 변수에 저장할 수 있다.그리고 그것의 앞부분으로 날씨 정보를 표시한다.

(async () => {
    await fetch(
        "https://api.openweathermap.org/data/2.5/weather?q=mumbai&units=metric&APPID=YOUR_KEY"
    )
        .then((response) => response.json())
        .then((data) => {
            const forecast = data.weather[0].description;
            const temperature = data.main.temp;
            const name = data.name;
            console.log(`Today's forecast for ${name}: ${forecast}`);
            console.log(`It's currently ${temperature}°C `);
        })
        .catch(console.log(`Error: ${err}`));
})();

Today's forecast for Mumbai: haze
It's currently 30°C

결론: 우리는 nodejs를 위해fetch를 설치하는 방법을 배웠다.어떻게 간단한 리셋을 얻을 수 있습니까?마지막 비동기 대기.이것은 날씨 API를 얻는 첫걸음입니다. 멋진 것을 많이 사용할 수 있습니다. 이 날씨 API의 실례를 보고 싶으면 아래 링크를 클릭하십시오.여기서 API를 사용하는 대부분의 작업은 API마다 동일합니다.따라서, 장래에fetch를 사용할 수 있습니다.읽어주셔서 감사합니다.😄.

링크:

날씨 응용 프로그램 구현 소스 코드

예를 들어 Live site

추가 읽기:

Fetch API
Async/await

비디오 링크:

연락처: