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

1.使用vue-resource

• 安装vue-resource：

cnpm install vue-resource --save

• 去main.js文件配置vueResource（先导入，再使用）：

//导入vue-resouece
import vueResource from 'vue-resource';
//使用  与整个Vue实例进行关联，关联之后才能用vueResource进行请求
Vue.use(vueResource);

• 创建Mock.vue文件，在其中使用：

Mock.vue：可在src目录下新建一个文件名为MyComponents，在文件中新建一个文件夹，可命名为Mock.vue

• 在App.vue中进行导入与配置：

方法见：“vue中创建单文件组件、注册组件、使用组件”

<template>
<div id="app">
<!-- 组件的使用 -->
<v-Mock></v-Mock>
</div>
</template>
<script>
// 导入组件
import Mock from './MyComponents/Mock.vue';
export default{
name:"App",
// 注册组件
components:{
'v-Mock':Mock
}
}
}
</script>
<style>
</style>

• 在Mock.vue中请求数据：

<template>
<div id="Mock">
<p>{{msg}}</p>
</div>
</template>
<script>
export default{
name:"Mock",
data(){
return{
msg:"我是Mock组件"
}
},
mounted(){
// 使用远程路径请求
let url="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
this.$http.get(url).then((response)=>{
console.log(response.body.result);
});

// 使用模拟数据请求    /user、/list为“vue中使用mock模拟数据”中模拟的两个接口
//then表示请求完成之后，相当于success
this.$http.post("/user").then((response)=>{
console.log(response.body.data);
});

this.$http.post("/list").then((response)=>{
console.log(response.body);
});
}
}
</script>
<style>

</style>

2.使用axios
请求mock数据、远程api、支持的是cross跨域

• 安装axios：

cnpm install axios --save

• 创建Axios.vue文件，在其中使用：

Axios.vue：可在src目录下新建一个文件名为MyComponents，在文件中新建一个文件夹，可命名为Axios.vue

• 在App.vue中进行导入与配置：

方法见：vue中创建单文件组件、注册组件、使用组件

<template>
<div id="app">
<v-Axios></v-Axios>
</div>
</template>
<script>
import Axios from './MyComponents/Axios.vue';
export default{
name:"App",
components:{
'v-Axios':Axios
}
}
}
</script>

• 导入axios：

在哪里使用，在哪里导入

import axios from 'axios'

• 在Axios.vue中请求数据：

局部axios

<template>
<div id="axios">
<p>{{msg}}</p>
</div>
</template>
<script>
import axios from 'axios';
export default {
name:"Axios",
data(){
return{
msg:"Axios插件"
}
},
mounted(){
// 使用远程路径请求
let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
axios.get(api).then((res)=>{
console.log(res.data.result);
});
}
}
</script>

Q：怎样将局部axios打包成全局axios？
A：去main.js文件配置axios：

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

使用时需写为：

<template>
<div id="axios">
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
name:"Axios",
data(){
return{
msg:"Axios插件"
}
},
mounted(){
// 使用远程路径请求
let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
this.$axios.get(api).then((res)=>{
console.log(res);
});

// 使用模拟数据请求    /user、/list为“vue中使用mock模拟数据”中模拟的两个接口
this.$axios.post("/user").then((res)=>{
console.log(res.data.data);
});

this.$axios.post("/list").then((res)=>{
console.log(res.data);
});
}
}
</script>

3.使用Fetch-jsonp
请求mock数据、远程api、支持的是jsonp跨域

• 安装fetch-jsonp：

cnpm install fetch-jsonp --save

• 创建Fetchjsonp .vue文件，在其中使用：

Fetchjsonp .vue：可在src目录下新建一个文件名为MyComponents，在文件中新建一个文件夹，可命名为Fetchjsonp .vue

• 导入fetch-jsonp：

在哪里使用，在哪里导入

import Fetchjsonp from 'fetch-jsonp'

• 在Fetchjsonp.vue中请求数据：

<template>
<div id="Fetchjsonp">
<p>{{msg}}</p>
</div>
</template>
<script>
import Fetchjsonp from 'fetch-jsonp';
export default {
name:"Fetchjsonp",
data(){
return{
msg:"Fetchjsonp"
}
},
mounted(){
let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
Fetchjsonp(api).then((res)=>{
return res.json();
}).then((res)=>{
console.log(res);
});
}
}
</script>