0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Axios メモ

Posted at

Axiosに関するメモです。

主に、requestからaxiosに書き換える場合を想定しています。

requestとrequest-promiseはdeprecatedになってから久しいので、使っては駄目。
もし利用しているコードがあったら速やかにテストを書いて、別のモジュールに載せ替えて元のコードは捨てること。

ライブラリリンク

request

This package has been deprecated
https://www.npmjs.com/package/request

request-promise

This package has been deprecated
https://www.npmjs.com/package/request-promise

Axios

Promise based HTTP client for the browser and node.js
https://axios-http.com/

Request リクエスト

基本的にはドキュメントが全て。
下記に記載するのはあくまでメモなのでそのまま利用しないこと。

基本的には特に難しいことはなくて、ライブラリをインストールしたらコードの先頭で読み込みして下記のようにするだけ。

axios(config);

ドキュメントにはaxios.postなどの記載があるが、基本的にはエイリアスなのでconfigの設定を覚えておけば問題ない。

config コンフィグ

axiosでリクエストするには、このconfigの設定を正しく行うことが全て(と個人的に思います)。

主なものを記載。
※必須と記載したものはあくまでもaxios(config)の記述方法の時に必須となること。

url

必須
フルで記載しても良いが、baseURLと一緒に使っても良い。

method

リクエストメソッド。
getの場合は不要(defaultがget)
リクエストメソッドは、実際にはAPIサーバーがどのメソッドを受け入れるかで違うので、データを取得するだけでもpostということはあり得る。

headers

リクエストヘッダー

headers: {}

APIサーバーにより必要なヘッダーを指定。

data

データ

data: {}

基本的にはここにリクエストする際に必要なデータを乗せることになる。

Response レスポンス

レスポンススキーマを参照。

{
  data: {},
  stasus: 200,
  headers: {},
  config: {},
  request: {}
}

上記のような感じで、データはdataの中に入ってくる。
デフォルトはJSONなので、よしなにパースしてJSのオブジェクトに変換して利用する。

利用例

Exampleを参照。
https://axios-http.com/docs/example

axiosというか、他のライブラリも大体同じと思うが、基本的にはNode.js(JS)の場合は非同期リクエストになるので、レスポンスはPromiseが戻ってくる。

基本的にはPromiseチェーンではなくて、async/awaitで良いと思う。

下記はドキュメントをそのまま記載しているが、基本はそのまま使える。
(エラー処理はAPIサーバーの仕様により対応する必要はある。)

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

テスト

テストを書くには、APIサーバーに接続する部分と、データを準備する部分、最終的にリクエストをする部分とだいたい3つの関数に分けると良いかと思う。

テストにはJestなどを利用する。
https://jestjs.io/ja/

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?