axiosを使ってAPI通信書いてみる

はじめに

たまたまaxiosについて調べる機会があったので、備忘録として投稿しようと思います。

そもそもaxiosとは、promiseベースのHTTPクライアントです。
API通信をより簡単に実装できるライブラリだと思っていただければと思います。

[npm]
https://www.npmjs.com/package/axios
[web site]
https://axios-http.com/

では早速代表的なリクエストの実装方法をまとめます。
なおAPIについてはJSONPlaceholderを使用しております。
https://jsonplaceholder.typicode.com/

代表的なリクエストの実装方法

GET

// GETリクエスト
axios.get("https://jsonplaceholder.typicode.com/posts/")
  .then((res) => {
    console.log(res.status); // ステータスコード
    console.log(res.data); // レスポンスデータ
    console.log(res.statusText); // ステータスメッセージ
    console.log(res.headers); // レスポンスヘッダー
    console.log(res.config); // 設定
  })
  .catch((error) => {
    console.log("error: "+error);
  });

// config Objectを渡す方法
axios({
    method : 'GET',
    url    : 'https://jsonplaceholder.typicode.com/posts/'
  }).then((res) => {
    console.log(res.status); // ステータスコード
    console.log(res.data); // レスポンスデータ
    console.log(res.statusText); // ステータスメッセージ
    console.log(res.headers); // レスポンスヘッダー
    console.log(res.config); // 設定
  })
  .catch((error) => {
    console.log("error: "+error);
  });

POST

// POSTリクエスト
const data = { name: "佐藤", age: 20 };
axios.post("https://jsonplaceholder.typicode.com/posts/", data)
  .then((res) => {
    console.log(res.status); // ステータスコード
    console.log(res.data); // レスポンスデータ
    console.log(res.statusText); // ステータスメッセージ
    console.log(res.headers); // レスポンスヘッダー
    console.log(res.config); // 設定
  })
  .catch((error) => {
    console.log("error: "+error);
  });

// config Objectを渡す方法
axios({
    method : 'POST',
    url    : 'https://jsonplaceholder.typicode.com/posts/',
    data   : { name: "佐藤", age: 20 }
  }).then((res) => {
    console.log(res.status); // ステータスコード
    console.log(res.data); // レスポンスデータ
    console.log(res.statusText); // ステータスメッセージ
    console.log(res.headers); // レスポンスヘッダー
    console.log(res.config); // 設定
  })
  .catch((error) => {
    console.log("error: "+error);
  });

DELETE

// DELETEリクエスト
axios.delete("https://jsonplaceholder.typicode.com/posts/1/")
  .then((res) => {
    console.log(res.status); // ステータスコード
    console.log(res.data); // レスポンスデータ
    console.log(res.statusText); // ステータスメッセージ
    console.log(res.headers); // レスポンスヘッダー
    console.log(res.config); // 設定
  })
  .catch((error) => {
    console.log("error: "+error);
  });

// config Objectを渡す方法
axios({
    method : 'DELETE',
    url    : 'https://jsonplaceholder.typicode.com/posts/1/'
  }).then((res) => {
    console.log(res.status); // ステータスコード
    console.log(res.data); // レスポンスデータ
    console.log(res.statusText); // ステータスメッセージ
    console.log(res.headers); // レスポンスヘッダー
    console.log(res.config); // 設定
  })
  .catch((error) => {
    console.log("error: "+error);
  });

タイムアウト時間を設定

// タイムアウトを設定
axios.get("https://jsonplaceholder.typicode.com/posts/", { timeout : 1000 })
  .then((res) => {
    console.log(res.status); // ステータスコード
    console.log(res.data); // レスポンスデータ
    console.log(res.statusText); // ステータスメッセージ
    console.log(res.headers); // レスポンスヘッダー
    console.log(res.config); // 設定
  })
  .catch((error) => {
    console.log("error: "+error);
  });

// config Objectを渡す方法
axios({
    method  : 'GET',
    url     : 'https://jsonplaceholder.typicode.com/posts/'
    timeout : 1000
  }).then((res) => {
    console.log(res.status); // ステータスコード
    console.log(res.data); // レスポンスデータ
    console.log(res.statusText); // ステータスメッセージ
    console.log(res.headers); // レスポンスヘッダー
    console.log(res.config); // 設定
  })
  .catch((error) => {
    console.log("error: "+error);
  });

Basic認証を突破する

// Basic認証
axios.get("https://jsonplaceholder.typicode.com/posts/", { auth : { username : 'basic', password : 'password' } })
  .then((res) => {
    console.log(res.status); // ステータスコード
    console.log(res.data); // レスポンスデータ
    console.log(res.statusText); // ステータスメッセージ
    console.log(res.headers); // レスポンスヘッダー
    console.log(res.config); // 設定
  })
  .catch((error) => {
    console.log("error: "+error);
  });

// config Objectを渡す方法
axios({
    method  : 'GET',
    url     : 'https://jsonplaceholder.typicode.com/posts/'
    auth    : { username : 'basic', password : 'password' }
  }).then((res) => {
    console.log(res.status); // ステータスコード
    console.log(res.data); // レスポンスデータ
    console.log(res.statusText); // ステータスメッセージ
    console.log(res.headers); // レスポンスヘッダー
    console.log(res.config); // 設定
  })
  .catch((error) => {
    console.log("error: "+error);
  });

まとめ

とても簡単にGET, POST, DELETE、タイムアウト、Basic認証突破の実装ができますね。
レスポンスも多くのものを返却してくれるので、その後の実装もしやすそうです。

ここでは記載していないですが、APIの直列処理/並列処理も簡単に書けます。

MITライセンスかつAPIリクエスト時の基本知識になってきているので、みなさんもどんどん使っていきましょう。