vue请求后台数据的几种方式
常用的为:vue-resource、axios、fetch-jsonp1、vue-resource官方提供的 vue的一个插件export default{data(){return {msg:'我是一个首页组件msg',flag:true,...
·
常用的为:vue-resource、 axios、fetch-jsonp
参考链接:https://www.cnblogs.com/zhangjunkang/p/10147357.html
1、vue-resource 官方提供的 vue的一个插件
①安装:在项目根目录进行安装:cnpm install vue-resource --save
save说明:将此插件名插入到pachage.json文件中,别人在使用时,直接npm install,就会安装package.json里的所配置的软件插件名称了。
②引入vue-resource
在main.js中引入这个插件,并使用这个插件
import VueResource from 'vue-resource'
Vue.use(VueResource );
③示例:
export default{
data(){
return {
msg:'我是一个首页组件msg',
flag:true,
list:[]
}
},
methods:{
getData(){
//请求数据
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
this.$http.get(api).then((response)=>{
console.log(response);
//注意this指向
this.list=response.body.result;
},function(err){
console.log(err);
})
}
},
mounted(){ /*生命周期函数*/
this.getData();
}
}
2、
axios 的使用
1、安装 cnpm install axios --save
2、哪里用哪里引入axios
import Axios from 'axios';
export default{
data(){
return {
list:[]
}
},
methods:{
getData(){
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
Axios.get(api).then((response)=>{
this.list=response.data.result;
}).catch((error)=>{
console.log(error);
})
}
},
mounted(){ /*生命周期函数*/
this.getData();
}
}
3、fetch-jsonp 不受跨域限制
安装 cnpm i fetch-jsonp -S
用法 : 在项目中引入
import fetchJsonp from fetch-jsonp
let domain=`http://api.douban.com/v2/movie/top250`
fetch(this.domain,{
start:0,
count:20,
method:'GET',
mode:'no-cors'
}).then(response=>{
console.log(response)
console.log(response.json())
return response.json()
}).then(res=>{
console.log(res)
}).catch(e=>{
console.log(e)
})
更多推荐
已为社区贡献1条内容
所有评论(0)