这次给大家带来Vue2.0的http请求和loading展示使用详解，使用Vue2.0的http请求和loading展示的注意事项有哪些，下面就是实战案例，一起来看一下。
我们需要额外两个依赖vuex 和 axios：（还是接着上一个项目MyFirstProject写）
npm i vuex axios -D
登录后复制
首先简单的阐述下http请求
1、main.js 中引入axios
import axios from 'axios' Vue.prototype.$http = axios;
登录后复制
2、focus.vue中写个函数获取数据
![]()
{{ item.name }}
{{ item.production }}
取消关注
export default{data(){return {focusList:[] //存储请求返回的数据}},mounted(){this.getFocusList()},methods:{getFocusList(){ //http get请求data.json 的数据var vm = this;this.$http.get('src/assets/data/data.json').then(function(res){vm.focusList = res.data;}).catch(function(err){console.log(err)})}}}#focus{text-align:left;}#focus ul{margin:0 auto;width:50rem;border-bottom:none;}#focus p{margin:0;}#focus li{width:46rem;display:block;border-bottom:1px solid #ddd;padding:0.5rem 2rem;cursor:default;}#focus img{height:4rem;margin-left:-1rem;}.fportraits{float:left;width:4rem;height:4rem;border-radius:50%;overflow:hidden;}.details{float:left;margin-left:1rem;}.isfocused{float:right;font-size:0.8rem;height:0.8rem;line-height:0.8rem;margin:0;}.clearfix{clear:both;}
登录后复制
我的两个男神羡慕羡慕有没有很帅
到此请求数据就结束了，是不是很简单，然额接下来涉及到store就有点复杂了,欲知后事如何，且听下回分解~
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
jQuery+JSONP跨域请求的使用步奏详解
node的process与child_process模块的使用详解
以上就是Vue2.0的http请求和loading展示使用详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2773557.html
