# HTTP通信をラクに実装できる「axios」の基本

URL: https://webrandum.net/javascript-axios/
公開日: 2021-11-06
更新日: 2021-11-06
カテゴリー: コーディング
タグ: JavaScript
出典: Webrandum（著者: サイトウ マサカズ）

最近、HTTP通信にaxiosを使う機会があったので、基本的な使い方からエラー処理などまで、備忘録として基本的な部分をまとめておきます。

## axios

まずaxiosは「アクシオス」と読み、もともとギリシャ語で「値する」という意味らしいです。

`Promise`ベースのHTTPクライアントで、非同期なHTTP通信が簡単に実装できます。

また、Vue.jsでは非同期通信にaxiosを使うことがスタンダードになっています。

### インストール方法

npmを使ってインストールする場合は下記。

```
$ npm install axios --save
```

yarnの場合は下記コマンド。

```
$ yarn add axios
```

CDNを利用する場合のタグを追加します。

```
<script src="https://unpkg.com/axios/dist/axios.min.js"><script>
```

## 基本の使い方

### GET通信

GET通信をしたいときは`axios.get()`を使用します。

第1引数にURLを指定し、通信の結果によってそこから分岐します。

- .then()：通信が成功したときの処理

- .catch()：エラー時の処理

- .finally()：通信が成功しても失敗しても行う処理

```
axios.get('URL')
.then(function (response) {
  // 通信が成功したときの処理
  console.log(response);
})
.catch(function (error) {
  // エラー時の処理
  console.log(error);
})
.finally(function () {
  // 常に実行する処理
});
```

レスポンスは下記になります。

`response.data`にデータが入っているので、そこさえ覚えておけばOKです。

| レスポンス | 中身 |
| --- | --- |

| response.data | レスポンスデータ |
| --- | --- |

| response.status | ステータスコード |
| --- | --- |

| response.statusText | ステータステキスト |
| --- | --- |

| response.header | レスポンスヘッダ |
| --- | --- |

| response.config | コンフィグ |
| --- | --- |

### POST通信

POST通信をしたいときは`axios.post()`を使用します。

第1引数にURLを指定し、第2引数に送信したいデータを指定します。

```
axios.post('/user', {
  id: 1,
  name: 'user_name'
})
.then(function (response) {
  // 通信が成功したときの処理
  console.log(response.data);
})
.catch(function (error) {
  // エラー時の処理
  console.log(error);
})
.finally(function () {
  // 常に実行する処理
});
```

## axios APIの使用

`axios()`で様々なオプションを指定することで、カスタムヘッダーの送信やTokenの送信、ベーシック認証のかかったページへの通信も可能です。

GET通信の基本の形が下記になります。

```
axios({
  method: 'get',
  url: 'GETするURL',
})
```

POST通信の場合は下記になります。

```
axios({
  method: 'post',
  url: 'POSTするURL',
  data: {
    id: 1,
    name: 'user_name'
  }
});
```

### カスタムヘッダーの送信

カスタムヘッダーの追加は「headers」で行えます。

```
axios({
  method: 'post',
  url: 'POSTするURL',
  headers: {
    // ここにカスタムヘッダーの内容を追加
  },
})
```

### ベーシック認証のかかったページへの通信

ベーシック認証のかかったページへの通信を行いたい場合は「auth」内の「username」と「password」にユーザー名とパスワードを入力するだけです。

```
axios({
  method: 'get',
  url: 'GETするURL',
  auth: {
    username : 'user',
    password : 'pass'
  },
})
```

fetchなどでベーシック認証をしようとすると、`btoa`を使ってユーザー名とパスワードを「:」で区切った文字列を変換しないといけなかったりします。

それと比べると分かりやすくてラクですね。