Fetch APIによるHTTPリクエスト

Fetch APIを利用したHTTPリクエストの実装方法を確認します。ステータスコードの確認方法、HTTPメソッドの指定方法など確認していきます。
(TypeScriptで実装しています。)

2xx以外のときrejectされない点や、Response Bodyを取得するときPromiseが返される点など気をつけたい点かと思います。

xhrとfetch

768-javascript-fetch_00.png

HTTPリクエスト送信にて XHR(XMLHttpRequest)以外にfetchというAPIを利用できます。

xhrと比較して、fetchはよりモダンな記述で実装できます。また、Service Workerでもfetchを利用します。

HTTPリクエストとしてメジャーなaxiosxhrをベースにして実装されています。fetchをベースに実装しているライブラリとしては、kyなどが有名です。

fetchの使い方を確認|get
( 第1引数にURL指定 )

動作確認コード

const getData = async (): Promise<void> => {
  try {
    const response = await fetch('http://localhost:3001/v1/users/123');
    console.log('show response.');
    console.log(response);

    if (!response.ok) {
      console.log('show status.');
      console.log(response.status);
    }

    console.log('show response data.');
    console.log(await response.json());
  } catch (error) {
    // ネットワークエラーのとき
    console.log('show error');
    console.log(error);
    throw error;
  }
};

fetchの第1引数にURLを指定します。第2引数を省略した場合、Getリクエストになります。

fetchはPromiseを返すので await をつけています。await response.json() のように、responseからjsonデータを取得するときもPromiseが返されるので await をつけています。

HTTPのステータスコードが 2xx であれば、 response.oktrue になります。なので、HTTPのステータスコードをチェックしたいとき、response.ok を条件に活用できます。

このコードで動作確認していきます。

動作確認|2xxのとき

サーバーサイドにて 200 を返すように調整して動作確認します。以下、Consoleパネルの表示です。

768-javascript-fetch_10.png

response.oktrue になっています。

動作確認|2xx以外のとき

サーバーサイドにて 403 を返すように調整して動作確認します。以下、Consoleパネルの表示です。

768-javascript-fetch_11.png

response.okfalse になっています。

動作確認|ネットワークエラー

ネットワークエラーが発生するようにリクエストURLのポートを変更して動作確認します。以下、Consoleパネルの表示です。

768-javascript-fetch_12.png

fetchでエラーが発生したため、catchブロックの処理が実行されています。

fetchの使い方を確認|get以外
( 第2引数にオプション指定 )

動作確認コード

const postData = async (): Promise<void> => {
  try {
    const response = await fetch('http://localhost:3001/v1/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Test': 'wakuwaku bank',
      },
      body: JSON.stringify({
        username: 'wakuwaku bank',
        age: 18,
      }),
    });
    console.log('show response.');
    console.log(response);

    if (!response.ok) {
      console.log('show status.');
      console.log(response.status);
    }

    console.log('show response data.');
    console.log(await response.json());
  } catch (error) {
    console.log('show error');
    console.log(error);
    throw error;
  }
};

fetchの第2引数にオプションをオブジェクト形式で指定できます。Postリクエストをしたいときは methodプロパティPOST を指定します。

動作確認

768-javascript-fetch_20.png

Networkパネルの表示です。

指定したmethod header bodyでリクエストされています。

参考

【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。 一方「レバテックキャリア」 などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

転職ドラフト」は、 企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。 ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。 レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。 「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。 エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。 登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。

logo
わくわくBank.
技術系の記事を中心に、役に立つと思ったこと、整理したい情報などを掲載しています。