Aspidaという素敵なAPIクライアント #TypeScript

はじめに

最近AspidaというAPIクライアントと出会い、開発体験の良さに感動しました。
この記事で紹介しようと思います。
https://github.com/aspida/aspida

何ができるか？

Aspidaは内部ではaxiosが使われていて、 APIの管理やリクエストをより良くしてくれます。

たとえば、axiosなどを使ってAPIにリクエストを送信するときbaseURLやパスを設定していくと思います。

axios.get('https://api.example.com/api/v1/articles')

Aspidaを使うと下のように書けます。

api.v1.articles.get()

パスに型をつけられるだけでなくリクエストパラメータやレスポンスボディにも型をつけることができます。
例えばapi/v1/loginへPOSTリクエストをするときにemailとpasswordが必要なら下記のように書けます。

const onSubmit = async () => {
  try {
    await api.v1.login.post({
      body: {
        email: formValue.value.email,
        password: formValue.value.password
      }
    })
  } catch (error) {
    console.log(error)
  }
}

リクエスト時のタイポで時間が奪われてしまった経験は誰しもあると思います。
それを防ぐことができるのは嬉しいですよね。

使い方

簡単に導入方法を紹介します。

まずインストルールです。

npm install aspida @aspida/axios axios

次にaspidaが読み込むためのapiディレクトリを作成します。
自分はvue-cliで作成した後のプロジェクトなのですがsrc配下にapiディレクトリを追加しました。

次にaspidaの設定ファイルをプロジェクトルートに配置します。
ファイル名はaspida.config.jsです。

aspida.config.js

module.exports = {
  input: 'src/api',
  baseURL: 'xxx',
}

あとはパスに合わせてTSファイルを書いていきます。
たとえばapi/v1/loginにPOSTリクエスト、リクエストボディはemail, passwordを指定するとしたら下記のようになります。

src/api/v1/login/index.ts

import { DefineMethods } from "aspida";

export type Methods = DefineMethods<{
    post: {
        reqBody: {
            email: string,
            password: string
        }
    }
}>

かなり直感的に書けますよね。
日本語のドキュメントも準備されていてかなり親切なので是非確認してみてください。