当サイトは、アフィリエイト広告を利用しています

javascriptの非同期通信処理~axios~

作成日：2022月05月21日

更新日：2024年02月17日

javascriptの非同期通信処理をaxios(JavaScriptでHTTPリクエストを行うためのライブラリ)
を使って行う方法を調べたので忘備録としての残す。

javascriptで非同期通信を行う方法はaxiosを使う他に

XMLHttpRequest
Fetch API(ネイティブなAPI)

を使う方法がある
それぞれ下記でまとめています。

個人的にはaxiosが使いやすいと感じているが
以前にプログラムを改修する際はXMLHttpRequestやFetch API
もよく見かけるので仕組みを覚えていても損はなさそう。

axiosとは

非同期通信処理でXMLHttpRequest + Promiseの処理をより簡単に扱えるようにしたライブラリ。
戻り値はPromiseが帰ってくる。

基本構文

ベースは下記になる

index.js


axios.エイリアス(第1引数, 第2引数, 第3引数)

戻り値

axiosは戻り値としてPromiseを返し、通信が成功した場合は resolveにはresponseが渡される。

index.js


import axios from "axios";

const axiosSampleFunc = () => {
  axios
    .get("https://jsonplaceholder.typicode.com/todos/1")
    .then((res) => console.table(JSON.stringify(res, null, 2)));
};

axiosSampleFunc();

responseの中身

実行して中身を見てみると下記があることが確認できる

レスポンスデータ
ステータスコード
ステータステキスト
レスポンスヘッダ
コンフィグ

response.log


{
  "data": {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  },
  "status": 200,
  "statusText": "",
  "headers": {
    "cache-control": "max-age=43200",
    "content-type": "application/json; charset=utf-8",
    "expires": "-1",
    "pragma": "no-cache"
  },
  "config": {
    "transitional": {
      "silentJSONParsing": true,
      "forcedJSONParsing": true,
      "clarifyTimeoutError": false
    },
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1,
    "headers": {
      "Accept": "application/json, text/plain, */*"
    },
    "method": "get",
    "url": "https://jsonplaceholder.typicode.com/todos/1"
  },
  "request": {}
}

またステータスコードが2xx以外だと、エラーとして処理され rejectにerrorが渡される

index.js


import axios from "axios";

const axiosSampleFunc = () => {
  axios
    // urlを変えて通信を失敗させる
    .get("https://jsonplaceholder.typicode.com/tod/1")
    .then((res) => console.log(JSON.stringify(res, null, 2)))
    .catch(error => {
      console.log(JSON.stringify(error,null,2))
      console.log(JSON.stringify(error.response, null, 2))

    })
};

axiosSampleFunc();

errorの中身

実行して中身を見てみる。基本的にはerror.responseを確認してエラーハンドリング処理を書く

error.log


// error
{
  "message": "Request failed with status code 404",
  "name": "Error",
  "stack": "Error: Request failed with status code 404\n    at createError (https://yjp3ov.csb.app/node_modules/axios/lib/core/createError.js:16:15)\n    at settle (https://yjp3ov.csb.app/node_modules/axios/lib/core/settle.js:17:12)\n    at XMLHttpRequest.onloadend (https://yjp3ov.csb.app/node_modules/axios/lib/adapters/xhr.js:66:7)",
  "config": {
    "transitional": {
      "silentJSONParsing": true,
      "forcedJSONParsing": true,
      "clarifyTimeoutError": false
    },
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1,
    "headers": {
      "Accept": "application/json, text/plain, */*"
    },
    "method": "get",
    "url": "https://jsonplaceholder.typicode.com/tod/1"
  },
  "status": 404
} 

// error.response
{
  "data": {},
  "status": 404,
  "statusText": "",
  "headers": {
    "cache-control": "max-age=43200",
    "content-length": "2",
    "content-type": "application/json; charset=utf-8",
    "expires": "-1",
    "pragma": "no-cache"
  },
  "config": {
    "transitional": {
      "silentJSONParsing": true,
      "forcedJSONParsing": true,
      "clarifyTimeoutError": false
    },
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1,
    "headers": {
      "Accept": "application/json, text/plain, */*"
    },
    "method": "get",
    "url": "https://jsonplaceholder.typicode.com/tod/1"
  },
  "request": {}
}

エイリアス

エイリアスは下記がある

request
get
delete
post
put
patch

構文サンプル

エイリアスによって引数が変わる。

requestの場合

requestを使う場合は引数は下記になる

第1引数:configオブジェクト

index.js


import axios from "axios";

const axiosSampleFunc = () => {
  axios
    .request({
      method: "GET",
      url: "https://jsonplaceholder.typicode.com/posts"
    })
    .then((response) => console.log(response.status));
};

axiosSampleFunc();

// 結果:200

requestは省略可能

getの場合

getを使う場合は引数は下記になる

第1引数:URL
第2引数:configオブジェクト※必須でない

index.js


import axios from "axios";

const axiosSampleFunc = () => {
  axios
    .get("https://jsonplaceholder.typicode.com/posts")
    .then((response) => console.log(response.status));
};

axiosSampleFunc();

postの場合

getを使う場合は引数は下記になる

第1引数:URL
第2引数:POSTするオブジェクト
第3引数:configオブジェクト※必須でない

index.js


import axios from "axios";

const sendData = 
  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  }

const axiosSampleFunc = data => {
  axios
  .post("https://jsonplaceholder.typicode.com/todos",data)
  .then((res) => console.log(JSON.stringify(res.data,null,2)));
};

axiosSampleFunc(sendData);

// 結果
// {
//   "userId": 1,
//   "id": 201,
//   "title": "delectus aut autem",
//   "completed": false
// }

configオブジェクトを使って書くこともできる

index.js


import axios from "axios";

const axiosSampleFunc = () => {
  axios
    .request({
      method: "POST",
      url: "https://jsonplaceholder.typicode.com/posts",
      data: {
        userId: 1,
        id: 1,
        title: "delectus aut autem",
        completed: false
      }
    })
    .then((res) => console.log(JSON.stringify(res.data,null,2)));
};

axiosSampleFunc();

// 結果
// {
//   "userId": 1,
//   "id": 201,
//   "title": "delectus aut autem",
//   "completed": false
// }

async,awaitと組み合わせる場合

async,awaitを使ってaxiosで非同期処理を書いてみる

index.js


import axios from "axios";

const axiosSampleFunc = async () => {
  const result = await axios.request({
    method: "GET",
    url: "https://jsonplaceholder.typicode.com/todos/1",
  })
  .then(res=>res.data)
  .catch((error)=>error.message)

  console.log(JSON.stringify(result,null,2));

};

axiosSampleFunc()

// 実行結果
// 成功
// {
//   "userId": 1,
//   "id": 1,
//   "title": "delectus aut autem",
//   "completed": false
// } 

// 失敗
// "Request failed with status code 404"

thenを省略した場合はresponseがresolveされる

index.js


import axios from "axios";

const axiosSampleFunc = async () => {
  const result = await axios.request({
    method: "GET",
    url: "https://jsonplaceholder.typicode.com/todos/1",
  })
  // .then(res=>res.data)
  .catch((error)=>error.message)

  console.log(JSON.stringify(result.data,null,2));

};

axiosSampleFunc()

// 実行結果
// {
//   "userId": 1,
//   "id": 1,
//   "title": "delectus aut autem",
//   "completed": false
// }

javascriptの非同期通信処理~axios~

javascriptの非同期通信処理~XMLHttpRequest~

javascriptの非同期通信処理~fetchAPI~

axiosとは

基本構文

戻り値

responseの中身

errorの中身

エイリアス

構文サンプル

requestの場合

getの場合

postの場合

async,awaitと組み合わせる場合

動作イメージ

axios with javascript

参考

関連記事

【Python × JavaScript】非同期処理の違いを整理する

新着記事

ストリームとは何か？

【Python】デバッグの仕組みを理解する(debugpy | DAP | Attach | Launch）

【Python × JavaScript】非同期処理の違いを整理する

【Python】イテレータとは何か？｜遅延評価と反復モデルの本質

【FastAPI】非同期と並行処理の構造を理解する