ノードのAPIを取得します.天気API

Mia AndersonのUnsplashによる写真
これはJSで最も重要な話題だと思います.開発者であることは我々の仕事のバックエンドで働いて、データベースから、または、インターネットから情報を取り出すことの一部です.それで、取得を知っていることはあらゆるウェブ開発者にとって非常に重要です.このチュートリアルでは、単にフェッチAPIを使用して取得し、Async/Waitを少し起動します.
フェッチAPIは、Webブラウザで非同期のHTTPリクエストを作成する最も簡単な方法の一つです.これは、JSは、ブラウザ上の要求を行うためのより柔軟な機能を提供する約束を使用します.取得メソッドは、我々が利用できるように、約束を返します.パラメータ()およびレスポンスを処理するcatch ()メソッドです.
これはノードのフェッチ要求の例です.jsあなたはバニラJSのためにパート2からこのチュートリアルを同じように適用します、あなたがNPMパッケージインストールを通過する必要がないように、フェッチは箱からバニラJSで利用可能です.

1ノードのパッケージをインストールする

まず最初にNPMプロジェクトを使ってディレクトリを作成し、同じディレクトリに作成し、JavaScriptファイルを作成します.

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

NPMパッケージをインストールします.

npm i node-fetch --save

アプリで.JSファイルはパッケージをインポートしなければなりません.パッケージをインポートするには以下のようにします.

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

ここでFETCHモジュールを使用できます.

2 . Weather情報のオープンWeatherMap APIの取得

デモのためにopenWeatherMap APIを使用します.その無料で使用すると、それはhereにサインアップすることができますaccount pageに行くとapitleキーを取得します.
ここで、FETCHメソッドのURLを渡すことでHTTPリクエストを作成できます.
まず、APIコールが動作しているかどうかをチェックするための簡単なフェッチリクエストを行い、コンソールにデータをログ出力します.
しかし、最初にどのように実際に動作するコードをチェックアウトできますか?
私たちは、フェッチのURLを通過している、それは我々のURLとAPIが正しいことを提供する、必要なすべての情報を持っている応答オブジェクトを返します.間違ったURLまたはAPIキーを渡すと、エラーオブジェクトを取得します.

url :内部の情報の最初のチャンクを取得するには?はAPIエンドポイントです.

?Q : Qはクエリを表し、クエリでは都市名を渡すことができます.この例のために、私は都市をムンバイに厳しくコーディングしています.後でユーザーから動的に都市名を取ることができます.参照のための私のgithubレポのためのリンク.

＆単位:これは摂氏または華氏の単位を測定している.

appsure id :これはAPIキーです.

この関数は、使用する約束を処理するために約束を返します.then ()は、約束が解決された後に使用できるメソッドコールバックです.約束は解決要求が成功し、エラーがないことを意味します..request ()が解決されていない場合に限り、catch ()メソッドは拒否された場合を扱います.catch ()メソッド.また、内部のコールバック関数として矢印関数を使用しています.それからキャッチ.

単純な取得例

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ブロックを使用して、devコンソールで意味の完全応答を返します.

3 . async / wait :

JavaScriptでは、特別な構文があります

async :それを実装するためには、関数の前にasyncを使わなければならない.戻り値は、自動的に約束でラップされます.単にasync関数は、我々の関数が約束を返すことを確認します.

が待ちます:それは、async機能の中で働きます.待っているキーワードは、約束が解決されるまで、JavaScriptを待ちます、そして、それ自体は、JSが約束が解決されるか、拒絶されるまで待つでしょう.

ここで私たちの例に戻って、私たちは、フェッチコールから応答を返す新しい関数を作成します.
最初のメソッドでは、フェッチが応答を解決するまで待機します.
関数の実行は待ち時間が呼び出された行を一時停止し、約束が解決されると再開されます.JavaScriptエンジンは、他のジョブを実行することができます.
最後に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と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のためのフェッチをインストールする方法を学びました。簡単なフェッチコールバックを実装する方法。を返します。これは、天気APIをフェッチするための最初のステップでは、以下のリンクを行くことができるこの天気APIのライブの例を参照したい場合は、クールなものの多くを使用することができます。私たちがAPIでここで行ったことのほとんどはすべてのAPIで同じです。したがって、将来的にはフェッチを使用することができます。読書ありがとう😄.

リンク

天気アプリ実装ソースコード

ライブサイト

更なる読書

Fetch API
Async/await

ビデオリンク：

接続してください。