axiosの学習

axios#

Axios とは何か#

Axios は Promise ベースのネットワークリクエストライブラリで、ブラウザと Node.js で使用できます。

Axios は使いやすく、パッケージサイズが小さく、拡張性のあるインターフェースを提供します。

axios を使用して URL でリクエストを送信する#

バックエンドはクロスオリジンを設定する必要があり、フロントエンドはクロスオリジンを設定する必要はありません。

axios を使用してパラメータなしの GET リクエストを送信する#

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios({
    url: "http://127.0.0.1:5000/keynav/on_categorys/19",
    method: "get",
}).then(res => {
    console.log(res);
})
export default {}
</script>

上記のコードを実行した後、F12 を開き、コンソールを確認すると結果が表示されます。

axios を使用してパラメータ付きの GET リクエストを送信する#

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios({
    url: "http://127.0.0.1:5000/keynav/on_categorys",
    method: "get",
    params: {
        id: "1"
    }
}).then(res => {
    console.log(res);
})
export default {}
</script>

axios を使用してパラメータなしの POST リクエストを送信する#

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios({
    url: "http://127.0.0.1:5000/keynav/on_categorys/19",
    method: "post",
}).then(res => {
    console.log(res);
})
export default {}
</script>

axios を使用してパラメータ付きの POST リクエストを送信する#

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios({
    url: "http://127.0.0.1:5000/keynav/on_categorys",
    method: "post",
    params: {
        id: "1"
    }
}).then(res => {
    console.log(res);
})
export default {}
</script>

axios を使用して並行リクエストを処理する#

並行リクエスト（結果が配列で返される）#

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios.all([
    axios.get("http://127.0.0.1:5000/keynav/category"),
    axios.get("http://127.0.0.1:5000/keynav/on_categorys", { params: { id: 19 } }),
]).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})
export default {}
</script>

スプレッドメソッドを使用してレスポンス配列結果を処理する（配列の各要素をオブジェクトに変換する）#

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios.all([
    axios.get("http://127.0.0.1:5000/keynav/category"),
    axios.get("http://127.0.0.1:5000/keynav/on_categorys", { params: { id: 19 } }),
]).then(
    axios.spread((res1, res2) => {
        console.log(res1);
        console.log(res2);
    })
).catch(err => {
    console.log(err);
})
export default {}
</script>

グローバル設定#

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:5000/keynav'
axios.defaults.timeout = 5000;
axios.get("/on_categorys", { params: { id: 19 } }).then(res => {
    console.log(res);
});
axios.post("/category").then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
});
export default {}
</script>

リクエスト設定#

これらはリクエストを作成する際に使用できる設定オプションです。url のみが必須です。method が指定されていない場合、リクエストはデフォルトで GET メソッドを使用します。

{
  // `url` はリクエストのサーバー URL
  url: '/user',

  // `method` はリクエスト作成時に使用するメソッド
  method: 'get', // デフォルト値

  // `baseURL` は `url` の前に自動的に追加されます。`url` が絶対 URL でない限り。
  // `baseURL` を設定することで、axios インスタンスのメソッドに相対 URL を渡すのが簡単になります。
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` はサーバーに送信する前にリクエストデータを変更できます。
  // これは 'PUT', 'POST', 'PATCH' のリクエストメソッドでのみ使用できます。
  // 配列の最後の関数は文字列、Buffer インスタンス、ArrayBuffer、FormData、または Stream を返す必要があります。
  // リクエストヘッダーを変更できます。
  transformRequest: [function (data, headers) {
    // 送信するデータを任意に変換処理します。

    return data;
  }],

  // `transformResponse` は then/catch に渡す前にレスポンスデータを変更できます。
  transformResponse: [function (data) {
    // 受信したデータを任意に変換処理します。

    return data;
  }],

  // カスタムリクエストヘッダー
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` はリクエストと一緒に送信される URL パラメータです。
  // 簡単なオブジェクトまたは URLSearchParams オブジェクトでなければなりません。
  params: {
    ID: 12345
  },

  // `paramsSerializer` はオプションのメソッドで、主に `params` をシリアライズするために使用されます。
  // (例: https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data` はリクエストボディとして送信されるデータです。
  // 'PUT', 'POST', 'DELETE', 'PATCH' リクエストメソッドにのみ適用されます。
  // `transformRequest` が設定されていない場合、次のいずれかのタイプでなければなりません:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - ブラウザ専用: FormData, File, Blob
  // - Node 専用: Stream, Buffer
  data: {
    firstName: 'Fred'
  },
  
  // リクエストボディデータのオプション構文
  // リクエスト方法 post
  // 値のみが送信され、キーは送信されません。
  data: 'Country=Brasil&City=Belo Horizonte',

  // `timeout` はリクエストのタイムアウトのミリ秒数を指定します。
  // リクエスト時間が `timeout` の値を超えると、リクエストは中断されます。
  timeout: 1000, // デフォルト値は `0` (タイムアウトなし)

  // `withCredentials` はクロスオリジンリクエスト時に認証情報を使用する必要があるかどうかを示します。
  withCredentials: false, // デフォルト

  // `adapter` はリクエストをカスタマイズして処理できるようにします。これにより、テストが容易になります。
  // 有効なレスポンスを提供する Promise を返します（lib/adapters/README.md を参照）。
  adapter: function (config) {
    /* ... */
  },

  // `auth` HTTP Basic Auth
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType` はブラウザが応答するデータタイプを示します。
  // オプションには: 'arraybuffer', 'document', 'json', 'text', 'stream'
  // ブラウザ専用：'blob'
  responseType: 'json', // デフォルト値

  // `responseEncoding` はレスポンスをデコードするためのエンコーディングを示します (Node.js 専用)。
  // 注意: `responseType` の値が 'stream' の場合、またはクライアント側のリクエストの場合は無視されます。
  responseEncoding: 'utf8', // デフォルト値

  // `xsrfCookieName` は xsrf トークンの値として使用されるクッキーの名前です。
  xsrfCookieName: 'XSRF-TOKEN', // デフォルト値

  // `xsrfHeaderName` は xsrf トークン値を持つ HTTP リクエストヘッダーの名前です。
  xsrfHeaderName: 'X-XSRF-TOKEN', // デフォルト値

  // `onUploadProgress` はアップロードの進捗イベントを処理することを許可します。
  // ブラウザ専用
  onUploadProgress: function (progressEvent) {
    // ネイティブの進捗イベントを処理します。
  },

  // `onDownloadProgress` はダウンロードの進捗イベントを処理することを許可します。
  // ブラウザ専用
  onDownloadProgress: function (progressEvent) {
    // ネイティブの進捗イベントを処理します。
  },

  // `maxContentLength` は Node.js で許可される HTTP レスポンスコンテンツの最大バイト数を定義します。
  maxContentLength: 2000,

  // `maxBodyLength`（Node のみ）は許可される HTTP リクエストコンテンツの最大バイト数を定義します。
  maxBodyLength: 2000,

  // `validateStatus` は与えられた HTTP ステータスコードが promise を解決するか拒否するかを定義します。
  // `validateStatus` が `true` を返す場合（または `null` または `undefined` に設定されている場合）、
  // promise は解決されます。それ以外の場合は拒否されます。
  validateStatus: function (status) {
    return status >= 200 && status < 300; // デフォルト値
  },

  // `maxRedirects` は Node.js で従う最大リダイレクト数を定義します。
  // 0 に設定すると、リダイレクトは行われません。
  maxRedirects: 5, // デフォルト値

  // `socketPath` は Node.js で使用される UNIX ソケットを定義します。
  // 例: '/var/run/docker.sock' で docker デーモンにリクエストを送信します。
  // `socketPath` または `proxy` のいずれかを指定できます。
  // 両方を指定した場合、`socketPath` が使用されます。
  socketPath: null, // デフォルト

  // `httpAgent` と `httpsAgent` はそれぞれ Node.js で HTTP および HTTPS リクエストを実行する際に使用されるカスタムエージェントを定義します。
  // これにより、デフォルトでは有効になっていない `keepAlive` などのオプションを追加できます。
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // `proxy` はプロキシサーバーのホスト名、ポート、およびプロトコルを定義します。
  // 通常の `http_proxy` および `https_proxy` 環境変数を使用できます。
  // `false` を使用すると、プロキシ機能が無効になり、環境変数も無視されます。
  // `auth` はプロキシに接続するために HTTP Basic auth を使用する必要があり、資格情報を提供します。
  // これにより、`Proxy-Authorization` リクエストヘッダーが設定され、`headers` に既に存在するカスタム `Proxy-Authorization` リクエストヘッダーを上書きします。
  // プロキシサーバーが HTTPS を使用している場合、プロトコルを `https` に設定する必要があります。
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // https://axios-http.com/zh/docs/cancellation を参照してください。
  cancelToken: new CancelToken(function (cancel) {
  }),

  // `decompress` はレスポンスボディを自動的に解凍するかどうかを示します。
  // `true` に設定すると、すべての解凍されたレスポンスオブジェクトから 'content-encoding' ヘッダーも削除されます。
  // - Node のみ（XHR は解凍をオフにできません）。
  decompress: true // デフォルト値

}

axios インスタンス#

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
let newVar1 = axios.create({
    baseURL: "http://127.0.0.1:5000/keynav",
    timeout: 5000
}); // axios インスタンスを作成
newVar1({
    url: "/on_categorys",
    params: {
        id: 19
    }
}).then((res) => {
    console.log(res);
}).catch((res) => {
    console.log(res);
});
let newVar2 = axios.create({
    baseURL: "http://127.0.0.1:5000/keynav",
    timeout: 5000
}); // axios インスタンスを作成
newVar2({
    url: "/category"
}).then((res) => {
    console.log(res);
}).catch((res) => {
    console.log(res);
});
export default {}
</script>

axios インターセプター#

axios は私たちに二種類のインターセプターを提供します。一つはリクエスト方向のインターセプター（成功リクエスト、失敗リクエスト）、もう一つはレスポンス方向のインターセプター（成功、失敗）です。

インターセプターの役割は、ネットワークリクエストを行う際にリクエストやレスポンス時に操作を応答的に処理することです。
リクエスト時にウェブページの読み込みアニメーションを追加したり、強制ログインを行ったりできます。
レスポンス時には、相応のデータ処理を行うことができます。

リクエスト方向の

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios.interceptors.request.use(config => {
    console.log("リクエストインターセプターに入ります");
    console.log(config);
    return config;
}, err => {
    console.log("リクエスト方向失敗");
    console.log(err);
});

axios.get("http://127.0.0.1:5000/keynav/on_categorys?id=19").then(res => {
    console.log(res);
})
export default {}
</script>

レスポンス方向の

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios.interceptors.response.use(config => {
    console.log("レスポンスインターセプターに入ります");
    return config; // リクエストを通過させます。return 文がないと、下の axios.get() の文は実行されません。
    // return config.data;
}, err => {
    console.log("レスポンス方向失敗");
    console.log(err);
});

axios.get("http://127.0.0.1:5000/keynav/on_categorys?id=19").then(res => {
    console.log(res);
})
export default {}
</script>

axios を Vue でモジュール化する#

方法 1：封装者が処理し、呼び出し側がリクエストする#

ネットワークリクエストに関連する部分を作成します。

network フォルダを作成し、その中にリクエストを保存するための request フォルダを作成し、その中に axios のリクエスト関数ファイル request.js を作成します。内容は axios モジュールをインポートし、関数をエクスポートする必要があります：

封装者の位置：src/network/request/request.js

//封装者の位置
import axios from 'axios'
export function request(config) {
    axios({
        url: config
    }).then(res => {
        console.log(res);
    })
}

次に、main.js で封装されたリクエストファイルをインポートします。

呼び出し側の位置：src/main.js

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import axios from 'axios'

Vue.use(ElementUI);
Vue.prototype.axios = axios;
Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount('#app');

//封装されたリクエストファイルをインポート
//呼び出し側の位置
import { request } from './network/request/request'
request("http://127.0.0.1:5000/keynav/on_categorys?id=19")

パラメータ補完版

//封装者の位置
import axios from 'axios'
export function request(config, success, fail) { //パラメータ：リクエスト結果、成功、失敗
    axios({
        url: config
    }).then(res => {
        success(res);
    }).catch(err => {
        fail(err);
    })
}

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import axios from 'axios'

Vue.use(ElementUI);
Vue.prototype.axios = axios;
Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount('#app');

//封装されたリクエストファイルをインポート
//呼び出し側の位置
import { request } from './network/request/request'
request("http://127.0.0.1:5000/keynav/on_categorys?id=19", res => {
    console.log(res);
}), err => {
    console.log(err);
}

方法 2：封装者がリクエストし、呼び出し側が処理する#

モジュール内でリクエストを行い、リクエスト情報を呼び出し側に処理させます。

//封装者の位置
import axios from 'axios'
export function request(config) { //パラメータ：リクエスト結果
    axios.defaults.baseURL = "http://127.0.0.1:5000/keynav";
    axios(config.url, { params: config.params }).then(res => {
        config.success(res);
    }).catch(err => {
        config.fail(err);
    })
}

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import axios from 'axios'

Vue.use(ElementUI);
Vue.prototype.axios = axios;
Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount('#app');

//封装されたリクエストファイルをインポート
//呼び出し側の位置
import { request } from './network/request/request'
request({
    url: '/on_categorys',
    params: {
        id: 19
    },
    success: res => {
        console.log(res);
    },
    fail: err => {
        console.log(err);
    }
})

方法 3：封装者がオブジェクトを返し、呼び出し側が処理する(推奨使用)#

封装者が Promise オブジェクトを返し、呼び出し側が then と catch メソッドを使用してレスポンス結果やエラー情報を処理します。

//封装者の位置
import axios from 'axios'
export function request(config) { //パラメータ：リクエスト結果
    return new Promise((resolve, reject) => {
        let newVar = axios.create({
            baseURL: "http://127.0.0.1:5000/keynav",
            timeout: 5000
        });
        newVar(config).then(res => {
            resolve(res);
        }).catch(err => {
            reject(err);
        })
    })
}

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import axios from 'axios'

Vue.use(ElementUI);
Vue.prototype.axios = axios;
Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount('#app');

//封装されたリクエストファイルをインポート
//呼び出し側の位置
import { request } from './network/request/request'
request({
    url: '/on_categorys',
    params: {
        id: 19
    },
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
});

方法 4：封装者がリクエストを作成し、Promise オブジェクトを返し、呼び出し側が処理する(推奨使用)#

封装者がリクエスト関数を使用してリクエストを行い、axios.create メソッドを使用してインスタンスを作成し、Promise オブジェクトを返します（封装者の位置の return newVar(config); は Promise オブジェクトを返す文です）。

呼び出し側は Promise の then と catch メソッドを使用してレスポンス結果やエラー情報を処理します。

//封装者の位置
import axios from 'axios'
export function request(config) { //パラメータ：リクエスト結果
    let newVar = axios.create({
        baseURL: "http://127.0.0.1:5000/keynav",
        timeout: 5000
    });
    return newVar(config);
}

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import axios from 'axios'

Vue.use(ElementUI);
Vue.prototype.axios = axios;
Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount('#app');

//封装されたリクエストファイルをインポート
//呼び出し側の位置
import { request } from './network/request/request'
request({
    url: '/on_categorys',
    params: {
        id: 19
    },
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
});