ky(HTTPクライアントライブラリ)によるHTTPリクエスト

kyを利用したHTTPリクエストの実装方法を確認します。「get, post, put, deleteメソッドの実装方法」「hooksを利用した前処理・後処理の共通化」など取り上げています。
(TypeScriptで実装しています。)

kyについて

kyはブラウザの Fetch API を利用したHTTPクライアントです。

インストール

ky をインストールします。

yarn add ky

バージョンは以下の通りです。

$ yarn info ky | grep 'version:'
  version: '0.25.0',

kyのinstance生成

kyインスタンスを生成します。

import ky from 'ky';

const client = ky.create({
  prefixUrl: 'http://localhost:3001',
  headers: { 'Content-Type': 'application/json' },
  timeout: 5000, // milliseconds
});

参考

Get

getメソッドの動作確認をします。

コード

import ky from 'ky';

const client = ky.create({
  prefixUrl: 'http://localhost:3001',
  headers: { 'Content-Type': 'application/json' },
  timeout: 5000, // milliseconds
});

const getData = async (): Promise<void> => {
  try {
    const response: Response = await client.get('v1/users/123');

    console.log('show response.');
    console.log(response);

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

getメソッド を利用します。
(第2引数で Options を設定できます。)

動作確認|2xxのとき

以下、動作確認時のConsoleパネルの表示です。

770-javascript-ky_00.png

fetch api を利用したときと同様のレスポンスが返されています。

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

サーバーサイドにて 403 を返すように調整して動作確認します。

770-javascript-ky_01.png

動作確認時のConsoleパネルの表示です。

fetch apiをそのまま利用したときと違い、kyでは2xx以外のときrejectされるので catchブロック の処理が実行されています。

Post

postメソッドの動作確認をします。

コード

const response: Response = await client.post('v1/users', {
  json: {
    username: 'wakuwaku bank',
    age: 18,
  },
});

postメソッド を利用します。第2引数の OptionsjsonプロパティRequest Body 指定しています。

動作確認

770-javascript-ky_10.png

Networkパネルの表示です。

Postメソッド、指定Reuqest Bodyでリクエストされています。

Put

putメソッドの動作確認をします。

コード

const response: Response = await client.put('v1/users/123', {
  json: {
    username: 'wakuwaku bank',
    age: 18,
  },
});

putメソッド を利用します。第2引数の OptionsjsonプロパティRequest Body 指定しています。

動作確認

770-javascript-ky_11.png

Networkパネルの表示です。

Putメソッド、指定Reuqest Bodyでリクエストされています。

Delete

deleteメソッドの動作確認をします。

コード

const response: Response = await client.delete('v1/users', {
  json: {
    data: { userId: 123 },
  },
});

deleteメソッド を利用します。第2引数の OptionsjsonプロパティRequest Body 指定しています。

動作確認

770-javascript-ky_12.png

Networkパネルの表示です。

Deleteメソッド、指定Reuqest Bodyでリクエストされています。

hooks
( 共通の前処理・後処理)

kyの hooks を利用するとリクエストの 前処理・後処理 を共通化することができます。

参考

コード
( beforeRequest afterResponse )

import ky from 'ky';

const client = ky.create({
  prefixUrl: 'http://localhost:3001',
  headers: { 'Content-Type': 'application/json' },
  timeout: 5000, // milliseconds
  hooks: {
    beforeRequest: [
      (request: Request) => {
        console.log('[beforeRequest]');
        console.log(request);
      },
    ],
    afterResponse: [
      (_request, _options, response: Response) => {
        console.log('[afterResponse]');
        console.log(response);
      },
    ],
  },
});

const testHooks = async (): Promise<void> => {
  try {
    console.log('[testHooks] before request');
    await client.get('v1/users/123');
    console.log('[testHooks] after request');
  } catch (error) {
    console.log('[testHooks] error');
  }
};

各ポイントでログ出力するように実装しています。

動作確認|2xxのとき

770-javascript-ky_21.png

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

770-javascript-ky_20.png

hooks を利用することで、リクエストの前後に共通処理を登録できることを確認できました。

参考

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

転職する

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

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

転職ドラフトを活用する

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

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

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

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

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

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