Axios は、HTTPリクエストを送信するために使用される人気のJavaScriptライブラリです。JavaScript、またはVue.jsやReact.jsなどの他のJavaScriptライブラリで使用される、PromiseベースのHTTPクライアントです。そのisomorphic 性質により、Axiosは同じコードベースを使用してクライアント側とサーバー側で同時に実行できます。また、 async と組み合わせて使用することで、ユーザーフレンドリーなAPIを構築するための強力なツールとなります。何よりも、Axiosにはリクエストを自動的に中断する機能があり、これは通常であれば困難な作業です。
How Does Axios Work?
Axiosは、デフォルトの promise 設定を使用して、ブラウザとNode.jsで同じコードを並行して実行します。PromiseベースのHTTP機能を使用して、AxiosはCRUD 操作を実行し、HTTPリクエストをREST エンドポイントに送信します。このチュートリアルでは、Vue.jsでAxiosを使用してREST APIを構成する手順を説明します。
始めましょう！
前提条件
このチュートリアルを完了するには、以下が必要です。
- Node.jsがインストールされ、Ubuntuシステムにセットアップされていること。
- CentOSを使用している場合は、このガイドに従ってCentOS 8にNode.jsをインストール.
- の基本JavaScript.
ステップ1：Axiosのインストール
Axiosをインストールする前に、エラーやインストールの失敗を避けるために、システムのリポジトリを更新することが重要です。
|
1 |
sudo apt-get update |
次に、 npm パッケージマネージャーを使用してAxiosをインストールします。
|
1 |
npm install axios --save |
または、 yarn パッケージマネージャーを使用してAxiosをインストールすることもできます。
|
1 |
yarn add axios |
その後、Vue.jsプロジェクトを作成し、そこにAxiosをインポートします。
|
1 |
import axios from ‘axios’; |
次のステップでは、 axios.get() メソッドを使用してリクエストを取得します。
ステップ2：GETリクエストを使用したデータの取得
ここでは、 GET リクエストを使用してデータを取得します。メソッドから直接データを取得するために、 axios.get() メソッドをどのように使用するかをご覧ください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<template> <div> <ul v-if="posts && posts.length"> <li v-for="post of posts"> <p><strong>{{post.title}}</strong></p> <p>{{post.body}}</p> </li> </ul> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { posts: [], errors: [], }; }, // コンポーネントの作成時に投稿を取得します。 created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // JSONレスポンスは自動的に解析されます。 this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
以下は async または await バージョンです：
上記のコードは JSONPlaceholder から投稿を取得し、順序なしリストでデータを配信します。発生したエラーは、別の順序なしリストに表示されます。
ステップ 3: POSTリクエストを使用したデータの送信
Opposite to the axios.get() メソッドとは逆に、今度は axios.post() メソッドを使用して POST リクエストを行います。データを取得するために axios.post() メソッドを適用する方法を見てみましょう：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<template> <div> <input type="text" v-model="postBody" @change="postPost()" /> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { postBody: "", errors: [] } }, methods: { // 呼び出されたときにサーバーに投稿をプッシュします。 postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
次のものが表示されます： async または await バージョン：
上記のコードは、以下にコンテンツを送信する入力フィールドを作成します： JSONPlaceholder。発生したあらゆる種類のエラーは、別の順序なしリストに表示されます。
ステップ 4: 共通のベースインスタンスのセットアップ
このステップでは、共通のベースインスタンスを作成するために、 axios.create() メソッドを使用します。共通のベースインスタンスをセットアップする目的は、すべてのインスタンスでベースURLを共有することです。
すべての呼び出しで共通のサーバーや、次のようなヘッダーを使用している場合、共通のベースインスタンスが便利です： Authorization ヘッダー：
|
1 2 3 4 5 6 7 8 |
import axios from "axios"; export const HTTP = axios.create({ baseURL: `http://jsonplaceholder.typicode.com/`, headers: { Authorization: "Bearer {token}" } }) |
最後に、 HTTP をコンポーネントで使用する準備が整いました：
すべての設定が完了すると、私たちの http-demo.js が確立されます。これで、Axiosは JSONPlaceholder および Authorization ヘッダーに、同じコードベースを使用して同時に接続します。最も素晴らしい点は、Axiosが posts を取得し、エラーを特定して、それらを順序なしリストに表示することです。
結論
このチュートリアルでは、Axiosを使用してデータをプッシュおよびプルする基本を学びました。さらに、共通のURLを共有するための共通のベースインスタンスを作成しました。しかし、これでAxiosの学習を終わりにしてはいけません。他のAxiosメソッドを練習して、 POST, PUT, PATCH および DELETE リクエストを送信してみてください。ぜひ、Axiosのドキュメントを読み込んで、このトピックを深く探索し、ご自身でプロジェクトを作成してみてください。
AxiosやVue.jsのトピックについてさらに学ぶには、こちらのブログのリソースをご覧ください:
ハッピーコンピューティング！
コメント
コメントはまだありません。最初のコメントを投稿しましょう。