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代码：

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生成的接口可能有某种限制，如果大家知道的话可以留言相告，在此谢过了！