19.Axiosを紹介し、実践する

21540 ワード
テキストリンク
隊長の板橋張基孝のVue.js入門インフラストラクチャコースを聞いて内容を整理した.
毎日20分ちょっとVuejs頑張れ.
IDE: Visual Studio Code
クロムビュー開発者ツール:Vue.js devtools

エシオス・アシオス


推奨するHTTP通信ライブラリを表示します.
PromiseベースのHTTP通信ライブラリは,他のライブラリより文書化の度合いが高い.
ダウン

注意:ajax


これは非同期Webアプリケーションを作成する方法です.
特定のDOMタグに従って、その中の部分だけを変更します.
したがって、ページの一部のみを変更します.したがって、ページ全体を再要求する必要はありません.
Ajaxウィキペディアリンク

注意:Vue-resource


Vue.jsは式ライブラリのライブラリとして使用されます.今は結構です.
VUE-リソース割当

オープンソースを使用する前に、


ダウン
  • スター数:大衆の認知度と信頼.
  • 貢献者:参加者
  • 提出履歴:ライブラリがいつ修正され、提出履歴が最近提出された場合、持続的、活発に発展していると解釈できます.

    • 注意:JavaScriptのリンクを理解するために使用します。


    JavaScript非同期処理とコールバック関数
    JavaScript Promiseについて
    JavaScript asyncとwait

    axios練習:URLから情報を取得して画面に出力する


    1.htmlを作成し、viewとaxiosを使用します。


    axiosを読み込むリンクは以下の通りです.
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

        new Vue({
            el: '#app'
        })
    </script>
</body>
</html>

    2.rest apiサイトの利用


    rest apiに定義済みサイト jsonplaceholderを利用させます.
    このURLでgetを要求すると,10個のユーザ情報がJSON形式で配列に含まれて伝達される.

    3.axiosにデータをインポートする関数の定義


    ビューインスタンスでは、axios定義関数getData()を使用して、上記のデータを取得します.
    axios.URLをget()に入れ、コンソールを開きます.log()に出力します.
    次に、ビューインスタンスのデータ属性にusersという配列を宣言します.
            new Vue({
            el: '#app',
            data:{
                users: []
            },
            methods:{
                getData: function(){
                    var vm = this; 
                    // 성공하면 then 쪽의 함수가 실행되고, 실패하면 catch쪽 함수가 실행된다. 
                    axios.get('https://jsonplaceholder.typicode.com/users/')
                    .then(function(response) {
                    console.log(response.data);
                    vm.users = response.data;
                    })
                    .catch(function(error) {
                    console.log(error);
                    });
                }
            }
        })

    4.getData()関数でビューインスタンスのユーザー配列に値を入力するには？


    これは、ビューインスタンス自体を意味します.
    getData関数の内部では、ビューインスタンスをvmとして受信できます.
    vmは、ビューインスタンスのユーザーを配置します.ユーザーの参考になります.
    users配列にaxiosの結果を割り当てます.
    vm.users = response.data 
    		getData: function(){
                    var vm = this; 
                    // 성공하면 then 쪽의 함수가 실행되고, 실패하면 catch쪽 함수가 실행된다. 
                    axios.get('https://jsonplaceholder.typicode.com/users/')
                    .then(function(response) {
                    console.log(response.data);
                    vm.users = response.data;
                    })
                    .catch(function(error) {
                    console.log(error);
                    });
                }
    axios.get()操作に成功するとthenページの関数が実行され、失敗するとcatchページ関数が実行されます.
    ちなみにthenとcatchについてはPromiseを知る必要があります.

    5.getData()メソッドを使用するボタン


    ボタンにv-onディレクトリのクリックイベントを加えてgetDataメソッドを起動します.
    ビューインスタンスのユーザー配列データがボタンの下に直接出力されるようにカッコを作成します.
        <div id="app">
        <button v-on:click="getData">get user</button>
        <div>
            {{ users }} 
        </div>
    </div>

    6.「クロム開発者ツールネットワークパネル」axios。get()に渡されるデータ構造


    コードを実行し、ボタンをクリックします.
    開発者ツールを開き、「Network」タブをクリックします.
    user/というURLリクエストをクリックすると、HTTPヘッダ、Previewなどのタブが表示されます.
    Previewタブでは、応答するデータが表示されます.

    user/という名前のURLをリクエストし、「Header」タブをクリックすると、HTTPレスポンスリクエストヘッダの情報が表示されます.

    HTTPプロトコルはWeb開発者が学ばなければならない内容である.


    フロントエンド開発者が知りたいHTTPプロトコル
    Google開発者ツール公式ドキュメント

    完全なコード

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="getData">get user</button>
        <div>
            {{ users }} 
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

        new Vue({
            el: '#app',
            data:{
                users: []
            },
            methods:{
                getData: function(){
                    var vm = this; 
                    // 성공하면 then 쪽의 함수가 실행되고, 실패하면 catch쪽 함수가 실행된다. 
                    axios.get('https://jsonplaceholder.typicode.com/users/')
                    .then(function(response) {
                    console.log(response.data);
                    vm.users = response.data;
                    })
                    .catch(function(error) {
                    console.log(error);
                    });
                }
            }
        })
    </script>
</body>
</html>
    今日axiosでデータを要求し、受信したデータを画面に出力します.
    開発中にHTTPリクエストとレスポンスを検証するには、Chrome開発者ツールを常にチェックしてデバッグしてください.
    次の授業でテンプレート文法を勉強します.
    オブジェクト向けプログラミング(OOP)の整理
    Linux CentOS 7ネットワーク構成ベース