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

#制作環境

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】 各記述方法 ～JavaScript × axios編～](https://qiita.com/Charry/items/ffd6db72de2c2be96e43)
[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】 各記述方法 ～jQuery × FetchAPI編～](https://qiita.com/Charry/items/9f22f61e5ef455b83ecb)

#今回作成するもの

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

##以下作成条件

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


#app.jsの修正

`resources>js`内の`app.js`を開き、`require('./bootstrap');`の下に以下を記述してください。

```JavaScript:app.js
require('./test');
```

更に、Vueの記述を以下のように戻してください。


```JavaScript:app.js
const app = new Vue({
    el: '#app',

    data() {
        return {

        }

    },
})
```

#スクリプトの作成

`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編と同じ

        // FetchAPIを使用し非同期通信を行います
        // 引数にアクセス先のURLを渡します
        // デフォルトでGET接続のため、第二引数には何も渡しません
        // .then()で通信成功時の処理を記述します
        // 以降は別途記載します
        fetch(url).then(response => response.json())
            .then(data => {
                // この処理はJavaScript編と同じです
                document.getElementById('supplier').value = data[0].trader_name;
            })
    })

}
```

##.then(response => response.json())

<font color="blue">FechAPIはPromiseオブジェクトを返り値として渡します。</font>
そのままでは使いづらいので、`Responseオブジェクト`の`Json()メソッド`を使用し、`JSON形式`で返すように指定します。


###FechAPIの返り値サンプル

![promise.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/0fe84b35-0f9e-6e3d-9553-e5df02e31e81.jpeg)


##.then(data => {

上の`JSON形式`の内容を、引数に入れた変数に代入できます。
ここではdataとしていますが、変数名は何でもかまいません。

###console.log(data);の値サンプル

![data.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/c5c94496-ee6b-32c4-7cdc-b03d9c1b1638.jpeg)

#コンパイル

Laravel-mixで読み込ませるためにコンパイルを行います。

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

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

```PHP
npm run dev
```

#確認

動作の確認を行ってください。
問題無く検索結果が反映されればOKです。

#FetchAPIのデメリット

古いブラウザーに対応できないというデメリットがあります。
<font color="red">IEやSafariには対応できません。</font>
対応させる場合GitHubのFetch polyfillが必要です。


以上です。
次回に続く。