はじめに
今回は、天気アプリの作成中OpenWeatherのAPIを利用してみた際に、async/awaitの他にfetchの知識が必要でしたので、復習がてらに使い方を確認していきたいと思います。
JavaScript~async/await、fetch編~
- とりあえずコードを見てみましょう。
WeatherApp
//一部抜粋
const apiKey = "My OpenWeather API Key";
const apiUrl = "https://api.openweather.org/data/2.5/weather?units=metric&q=japan";
async function openWeather(){
const response = await fetch(apiUrl + `&appid=${apiKey}`);
const data = await response.json();
};
//~~~~
- ここでキーとなるのが、非同期処理のasync/awaitと、APIを呼び出すためのfetchになります。使い方を簡単に説明していきたいと思います。
fetch
- fetch関数は、JavaScriptが外部からデータを取得するために用意した関数になっています。今回は、APIからデータを取得したいので以下のように記述します。
fetch確認用
fetch("data.json")
.then((data) => data.json())
.then((response) => console.log(response));
//fetch動作確認用のコンソール
console.log("test");
- fetch()は引数に取得するデータのパスやURLを指定してあげます。上記の
data.json()は、data(引数で指定しているdata.json)をjson形式で取得するように指定しています。.then()は一回目のthenの中身を実行した後に、二回目のthenが動作するようになっています。
thenとは？
・ここのthenメソッドは、前の処理を待つことが目的です。あるコードの後に実行したい場合に使用します。
- fetch確認用のコードを実行すると、fetch動作確認用のコンソール
testが先に表示されます。先ほど説明したように、thenを使うと前の処理を待って実行していますので、動作確認用のコンソールよりもfetch(...).then(...)の処理のほうが時間がかかってしまい、確認用のコンソールのほうが先に実行された、と言いうような流れになります。
async/await
- asyncとawaitはほぼセットになります。まずはコードを見てみましょう。
async,await確認用
async function fetchJson(){
const data = await fetch("data.json");
const response = await data.json();
console.log(response);
}
fetchJson();
- 上記は、fetch()の処理を待った後に、データが取得できると、data.json()で取得したデータをjson形式に直しています。その後、コンソールにresponseに格納された結果を表示している流れになります。
これは、.then()を使った書き方と同じ処理になります。以下比較してみます。
比較してみた
//thenを使った記述
fetch("data.json")
.then((data) => data.json())
.then((response) => console.log(response));
//async,awaitを使った記述
async function fetchJson(){
const data = await fetch("data.json");
const response = await data.json();
console.log(response);
}
fetchJson();
- 上記を見てみると、thenの役割を担っているのが、awaitになっています。
簡単に出したが、WeatherAppを作成している時に必要だったモノを紹介しました。