ノートVueがaxiosの09-モック傍受を学び、使用します

01、インストール

インストールのモック
mockjsをインストールNPMは

Axiosがインストールさ
AxiosをインストールNPM

02は、config.jsの傍受axios行う新しいファイルを作成します

インポート'Axios'からAxios
 // インスタンス作成 
CONST-SERVICE = axios.create（{
   // 設定された遅延時間要求 
  タイムアウト：3000 
}）

// インターセプト要求
service.interceptors.request.use（
  設定 => {
     戻り設定を
  } 、
  ERR => { 
    にconsole.log（ERR）
  } 
）

// 傍受応答
service.interceptors.response.use（
  応答 => { 
    LET RES = {} 
    res.status = のResponse.Status 
    res.data =response.data
     リターンRES 
  }、
  ERR => はconsole.log（ERR） 
）

// 输出 
輸出デフォルトのサービス

03、エントリーファイルで導入main.js

輸入HTTP './api/config'から
インポート './mock' 
Vue.prototype。$ HTTP = HTTP

04、モックフォルダの確立、および新しいファイルindex.jsを作成し、他のコンポーネントへの参照は、データ取得サブモジュールを容易にするために、モック要求データモックポイントを配置しました

index.js

 

 home.js

'mockjs'からインポートモック

エクスポートデフォルト{ 
  getHomeData：（） => {
     戻り{ 
      コード： 20000 、
      データ：{ 
        ビデオデータ：[ 
          { 
            名： 'SpringBoot' 、
　　　　　　　　//获取随机フロート
            値：Mock.Random。フロート（1000 10000、0、3 ）
          }、
          { 
            名： 'IOSの' 、
            値：Mock.Random。フロート（1000 10000、0、3 ）
          }、
          { 
            名前：'PHP' 、
            値：Mock.Random。フロート（1000 10000、0、3 ）
          }、
          { 
            名： 'H5' 、
            値：Mock.Random。フロート（1000 10000、0、3 ）
          }、
          { 
            名： '小程序' 、
            値：Mock.Random。フロート（1000 10000、0、3 ）
          } 
        ] 
      } 
    } 
  } 
}

 

04、（要求データインタフェースに使用するニーズに）使用

 この。$ http.get（ '/ホーム/ gatData'）。その後、（RES => { 
      にconsole.log（RES）
    }）