axiosのVUEの使用

まず、設置環境

1、axiosインストール

対応するプロジェクトディレクトリに実行します。

NPM axiosをインストール

2、テストデータAPIを開始

テストプロジェクト住所：https://github.com/ShenJianPing0307/VueTestAPI

第二に、使用axios

使用文書：https://github.com/axios/axios

例GETリクエストを送信します。

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
</ HEAD> 
<BODY> 

の<divのid = "アプリ"> 
    { {ユーザー情報}}
 </ div> 
<スクリプトSRC = "node_modules / VUE / DIST / vue.js"> </ SCRIPT> 
<スクリプトSRC = "node_modules / axios / DIST / axios.js"> </ SCRIPT> 

<SCRIPT > 新しいヴュー（{ 
        エル： '#app' 、
        データ：{ 
            のUserInfo：[] 
        }、
        作成した（）{ // 发送取得请求获取APIの数据の 
            axios.get（」http://127.0.0.1：8000 / API /ユーザデータ/」 ）
                .then（（レスポンス） =>

    
          
            {
                     // 成功をハンドル 
                    にconsole.logを（この）; // 矢印は目的関数、ウィンドウオブジェクト別段のこのインスタンスのVueで使用
                    この .userInfo = ; response.data 
                    にconsole.log（response.data）; 
                }） 
                。キャッチ（ （エラー）=> {
                     // エラー処理
                    はconsole.log（誤差）; 
                }） 
                。最後に（（）=> {
                     // 常に実行
                }）; 
        } 

    }）

 </ SCRIPT>

</ BODY> 
</ HTML>

注：そう、これはウィンドウオブジェクトは、論理機能を処理する矢印axiosを使用します

応答メッセージに含まれる値を返します：

axios.get（ 'http://127.0.0.1:8000/api/userdata/' ）
  .then（関数（応答）{ 
    にconsole.log（response.data）; // 配列データ要求 
    はconsole.log（応答。ステータス）; // 200がある 
    にconsole.log（response.statusText）; // OK 
    にconsole.log（Response.Headers）; // コンテンツタイプ： "テキスト/ HTML;のcharset = UTF-8" 
    はconsole.log（レスポンス。設定）; // すべての構成情報がURLを含む、ヘッダー、メソッド、等 
  }）。

おすすめ