Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript × axios編～

#制作環境

Windows 10
Laravel : 6.18.35
Laravel/ui : 1.0
Laravel-mix : 5.0.1
Bootstrap : 4.0.0
axios : 0.19
Vue : 2.5.17
XAMPP
PHP : 7.4.3
Visual Studio Code

#はじめに

この記事はプログラミングをはじめたばかりの素人が、できたことをメモするのに利用しています。
内容には誤りがあるかもしれません。


前回のつづきになります。

#関連記事

[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～事前準備編～](https://qiita.com/Charry/items/737085257784bd9fb6e2)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript編～](https://qiita.com/Charry/items/f605cbb686e8c0796450)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery編～](https://qiita.com/Charry/items/74c66aea1a82070a6d3d)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery × axios編～](https://qiita.com/Charry/items/0241c1b6a903c42cd9de)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～Vue.js × axios編～](https://qiita.com/Charry/items/7e932ce730a4d4c7e737)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript × FetchAPI編～](https://qiita.com/Charry/items/8297146146a6b729c8f6)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery × FetchAPI編～](https://qiita.com/Charry/items/9f22f61e5ef455b83ecb)

#今回作成するもの

<font color="blue">axiosを利用し非同期通信を行い、自動で仕入れ先が入力される機能を実装します。</font>

##以下作成条件

* <font color="red">基本的な記述にはJavaScriptを使用し通信にはaxiosを使用します。</font>
* 数字が4桁入力されたら自動で仕入れ先を検索し、反映します。
* 検索するのにクリック操作を必要としません。`input`に入力されたら検索します。
* スクリプトの読み込みには`Laravel-mix`を使用します。
* 前回作成した`test.js`を編集して使用するで、必要なら`test3.js`等コピーを作成してバックアップしてください。

##完成イメージ

![image2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/1f232979-597f-e27a-9b91-2be019d76181.jpeg)

#スクリプトの作成

resources>js内のtest.jsを開き、以下のように記述します。
<font color="red">※前回の内容は削除してください。</font>

```JavaScript:test.js
// ここから先はJavaScript編の記述と同じなので、詳細は割愛します
window.onload = function() {

    document.getElementById('code').addEventListener('input', function() {
        let traderCode = document.getElementById('code').value;

        if (traderCode.length < 4) {
            return;
        }

        let url = '/form_search?trader_code=' + traderCode;
// ここまではJavaScript編の記述と同じ

        // axios.get()メソッドを使い、引数のアドレスにGETアクセスします
        // then()で通信が成功した場合の処理を記述します
        // コントローラからのデータ(検索結果)は指定した引数で受け取ることができます
        // ここではresponseにデータを代入していますが、変数の名前はなんでもいいです
        axios.get(url).then(function(response) {

            // データの中から必要なものだけ取り出します
            let data = response.data;

            // 受け取ったデータ(検索結果)を仕入れ先のvalueに反映します
            document.getElementById('supplier').value = data[0].trader_name;
        })

    })

}
```

#コンパイル

ターミナルを起動し、以下を実行してください。
<font color="red">※node.jsが必要です。インストールされていない方は、インストールを行ってください。</font>

node.js
https://nodejs.org/ja/

```PHP
npm run dev
```

#確認

その他は前回のままで問題ありません。
実際に4桁の業者コードを入力し、検索できるか確認してください。

#thenの返り値について

以下は`console.log(response)`の値です。

![axios.data.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/31eda387-120d-3004-99ba-be63369d81b7.jpeg)

主に以下の値が返ってきます。
もちろん引数の変数名を`sample`等にした場合は、`response`の部分が`sample`になります。

```PHP
// レスポンスデータ
response.data

// ステータスコード
response.status

// ステータステキスト
response.statusText

// レスポンスヘッダ
response.headers

// コンフィグ
response.config
```

#エラーの対応について

通信させるのに必要な最低限の書き方しかしてないので、通信エラー時の処理は別途必要です。
`.catch(function(error) {}` でエラー時の処理ができます。
`.finally(function() {}` とすると成功しても失敗しても行う処理ができます。


以上です。
次回に続きます。