Vue使用 vue-resource、axios、fetch-jsonp请求数据

一、mock模拟数据

Mock.js 生成随机数据,拦截 Ajax请求 实现 前后端分离 

1.安装mockjs

cnpm install mockjs --save 

 2.建mock.js的文件，配置模拟数据

import Mock from 'mockjs'
//导入mockjs  使用变量
// Mock对象   mock方法 （路径 方法 数据）
//  /user  模拟接口
Mock.mock("/user","post",{   
    data:[
        {
            name:"张三",
            sex:"男"
        },
        {
            name:"李四",
            sex:"女"
        }
    ]

});

Mock.mock("/list","post",{
    data:[
        {
            name:"张三",
            sex:"男"
        },
        {
            name:"李四",
            sex:"女"
        }
    ]

});

3.使用mockjs 在 main.js里面引入

require("./Mock/Mock");

 

二、vue-resource请求数据

vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件。提供了一般的 HTTP请求接口和RESTful架构请求接口，并且提供了全局方法和VUe组件实例方法

1.安装vue-resource

cnpm install vue-resource --save

2在main.js文件配置vueresource 导入

import vueResource from 'vue-resource'

3.使用

vue.use(vueResource)

• 请求mock中的模拟数据

mounted（）{
        this.$http.post("/list").then((response)=>{
        console.log(response.data);
}
 //then表示请求完成之后，相当于success
 //   /list模拟接口

•  请求远程数据 

let url="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
    this.$http.post("url").then(res => {
      console.log(res.data);
    });

三、axios请求数据

支持cros跨域

1.安装axios

 cnpm install axios --save

2.使用axios 哪里需要在哪里导入

import axios from "axios";

3.局部axios

4.全局axios

在main.js文件配置axios

//配置axios 全局使用  $后的名字为自定义
import axios from 'axios';
Vue.prototype.$axios=axios; 

三、fetch-jsonp请求数据

请求mock数据、远程api、支持的是jsonp跨域

1.安装fetch-jsonp

 cnpm install fetch-jsonp --save

2.导入 哪里需要 导入哪里

 import Fetchjsonp from 'fetch-jsonp'

 3.请求远程数据