【JavaScript】async / await（fetch api）でQiita apiから記事情報を取得する方法【非同期処理】

javascriptで外部データを取得する方法が知りたいと思い、練習でQiita apiから記事情報を取得してみようと思った。
会社のテックリードの方に axios が便利と勧められたが、その前に async / await を使ったやり方も知っておきたいなと思ったので備忘録です。

サンプル

とりあえず以下がコードの例。
Qiita記事でjavascriptのタグが付いた記事と取得したデータからいいねが1つ以上ついた記事のURLを抽出しています。

async function getQiitaArticle(){
    //①自身のアクセストークン
    const MyToken = 'XXXXX';
    //②記事を100件取得する
    const QiitaURL = 'https://qiita.com/api/v2/tags/javascript/items?per_page=100';
    const FetchOptions = {
        method: 'GET',
        headers: {
            Authorization: `Bearer ${MyToken}`
        },
    };
    const ApiResponse = await fetch(QiitaURL, FetchOptions);
    if(ApiResponse.ok){
        const QiitaArticle = await ApiResponse.json();
        //取得した素のデータ。
        console.log(QiitaArticle)
        // いいね数が1個もしくは1個以上の記事URLを抽出する
         for(let i=0;i < QiitaArticle.length; i++){
            if(QiitaArticle[i].likes_count >= 1){
                console.log(QiitaArticle[i].url);
            }
        }
    } else {
        console.log('記事取得できなかった時のエラーを書く');
    }
}
getQiitaArticle();

今回はデータ取得にフォーカスするのでQiita apiのアクセストークン認証など仕様は省きますが「 ?per_page=XX 」を設定することでデフォルトで取得する数を決められます。
※パラメーター自体を省くと20件取得されます。

chromeの開発ツールのconsole欄を見てみると素で取得したデータと抽出したURLが確認できると思います。

解説

まず非同期関数として宣言するために async を先頭に書きます。

async function getQiitaArticle(){};

apiのURLを変数で宣言したと後にapi取得の記述を簡易化するためにオプションで以下を宣言しておきます。

const FetchOptions = {}

ここでGETやPOSTなどリクエストの指定とapi認証をするための方法をまとめておきます。

const ApiResponse = await fetch(QiitaURL, FetchOptions);

apiのURLとオプションをfetchでリクエストします。
リクエストが正常に行えたら指定した分のデータ数と条件に沿ったデータを返してくれます。

if(ApiResponse.ok){}

「.ok」は読んで字のごとくリクエストが通った時のプロパティです。
直感的で分かりやすいですね。

所感

思ってたよりシンプルな実装でデータ取得が出来ました。
apiはサービスによって仕様が異なるので、そこは要確認ですがデータを取得する方法自体はそこまで複雑ではないなという印象です。

参考

Qiitaの記事､JavaScriptのasync/awaitを使って取得してみる
async/await 入門（JavaScript）

2024年3月7日追記

サンプルコード内のfor文でiがグローバル変数になっていたのを修正しました。

- for(i=0;i < QiitaArticle.length; i++){
+ for(let i=0;i < QiitaArticle.length; i++){

ご指摘ありがとうございました