vue學習筆記：vue-resource、axios、fetch-jsonp請求數據，以及虛擬數據接口mock使用

mock的使用

mock是可以創建虛擬的數據接口，提供前端來使用，非常便捷，我們可以在mock官網查看mock的具體文檔和語法，這裏只是簡單介紹一下用法。

引入mock：

npm/cnpm install mockjs 

然後在src目錄下面創建一個文件夾例如mock，下面新建一個文件mock.js

然後創建虛擬數據如下：

import Mock from 'mockjs'

Mock.mock('/user',/post|get/i,{
    // "array|1-10": [   //自動創建數據
    //     {
    //       "name|+1": [
    //         "Hello",
    //         "Mock.js",
    //         "lili"
    //       ]
    //     }
    // ]
    "array":[     //手動創建指定數據
        {
            "name":"lili"
        },
        {
            "name":"tailong"
        },
        {
            "name":"lilkatei"
        },
        {
            "name":"didiui"
        },
        {
            "name":"lisyuw"
        }
    ]
})

這裏稍微說一下，我們可以根據自己的需要設置指定數據或者根據mock語法自動生成數據。然後在main.js中引入就可以直接調用了。

import './mock/mock'

vue中請求數據的方式

html代碼：

<template>
  <div id="app">
    <p >利用vue-resource獲取接口數據 <button @click="getData()">點擊獲取</button></p>
    <ul>
      <li v-for="item in list">
        {{item.name}}
      </li>
    </ul>
    <br>
    <hr>
    <p >利用第三方插件axios獲取接口數據 <button @click="getDataTwo()">點擊獲取</button></p>
    <ul>
      <li v-for="item in list2">
        {{item.name}}
      </li>
    </ul>
    <br>
    <hr>
    <p >利用fetch-jsonp獲取接口數據 <button @click="getDataThree()">點擊獲取</button></p>
    <ul>
      <li v-for="item in list3">
        {{item.title}}
      </li>
    </ul>
  </div>
</template>

1、vue-resource方式

引入vue-resource

npm/cnpm install vue-resource --save

然後在main.js中引入那個組件中用，直接用即可

import VueResource from 'vue-resource'

Vue.use(VueResource)

使用vue-resource進行數據獲取：

getData(){
  this.$http.get('/user').then(Response =>{
    this.list = Response.body.array;
  },error =>{
    console.log(error)
  })
}

數據展示結果如下：

2、axios方式

引入axiox：

npm/cnpm install axios --save

因爲axios是第三方插件，所以在哪個組件中用，直接在組件中引入即可

import Axios from 'axios';

請求數據：

getDataTwo(){
  Axios.get('/user').then(reponse =>{
    // console.log(reponse)
    this.list2 = reponse.data.array;

  }).catch(error =>{
    console.log(error)
  })
}

數據展示結果如下：

3、fetch-jsonp方式

引入fetch-jsonp：

npm/cnpm install fetch-jsonp --save

因爲也是第三方組件，所以和axios引入一樣，

import fetchJsonp from 'fetch-jsonp';

fetch-jsonp獲取數據：

getDataThree(){
  fetchJsonp('http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1').then((res) => {
      return res.json();
  }).then(data => {
      console.log(data)
      this.list3 = data.result;
  }).catch(function(ex) {
      console.log(ex);
})

獲取數據展示結果：

其實fetch-jsonp也想用mock.js虛擬的接口數據的，但是因爲出現了一個錯誤，一直報錯說jsonp請求數據超時，但是使用遠程接口就沒有問題，我才猜測可能是mock生成的接口可能有某種限制，如果大家知道的話可以留言相告，在此謝過了！