vue学习笔记：vue-resource、axios、fetch-jsonp请求数据，以及虚拟数据接口mock使用

川长思鸟来 2024-04-17 17:33 45阅读 0赞

## mock的使用 ##

mock是可以创建虚拟的数据接口，提供前端来使用，非常便捷，我们可以在[mock官网][mock]查看mock的具体文档和语法，这里只是简单介绍一下用法。

引入mock：

npm/cnpm install mockjs

然后在src目录下面创建一个文件夹例如mock，下面新建一个文件mock.js

![20190829135633147.png][]

然后创建虚拟数据如下：

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)
      })
    }

数据展示结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70][]

## 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)
      })
    }

数据展示结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1][]

## 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);
    })

获取数据展示结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 2][]

其实fetch-jsonp也想用mock.js虚拟的接口数据的，但是因为出现了一个错误，一直报错说jsonp请求数据超时，但是使用远程接口就没有问题，我才猜测可能是mock生成的接口可能有某种限制，如果大家知道的话可以留言相告，在此谢过了！

[mock]: http://mockjs.com/
[20190829135633147.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/18218ab6eac34eafadfdab6ad5367080.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/1e7b923d09ff4ac6bb127f59f6bd2c35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/7ff2c0516ba8417588b0f2144c24a2fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/77a3f37985ca4813b9e6cf6455d31ea5.png