vue2.0+++axios的使用方法

Posted on 2017-11-27 21:45  H海涛  阅读(575)  评论(0)  编辑  收藏  举报
  1. 方法一:直接在.vue文件中引入使用  
  2.   
  3. 在.vue文件中使用  
  4. <script>  
  5.   import axios from 'axios';  
  6.   export default {  
  7.     name: 'news',  
  8.     data () {  
  9.       return {  
  10.       }  
  11.     },  
  12.     methods: {  
  13.       getNewsFn(){  
  14.         axios.get(this.dataURL + '/getNews').then((news) => {  
  15.             this.news = news.data;  
  16.           }  
  17.         ).catch((err) => {  
  18.             console.log(err);  
  19.           }  
  20.         );  
  21.       }  
  22.     }  
  23.   }  
  24. </script>  
  25.   
  26.   
  27. 方法二:注册为全局的函数  
  28.   
  29. 首先在main.js文件中引入  
  30. import axios from '../node_modules/axios';  
  31.   
  32. Vue.prototype.axios = axios;  
  33.   
  34. new Vue({  
  35.   el: '#app',  
  36.   router,  
  37.   store,  
  38.   axios,  
  39.   echarts,  
  40.   template: '<App/>',  
  41.   components: { App }  
  42. });  
  43. 其次在.vue文件中使用  
  44.   defaultData(){  
  45.         let _this = this;  
  46.         _this.axios.get('http://' + _this.$store.state.defaultHttp + '?action_type=comp_news&comp_id=' + _this.$store.state.compValue + '&offset=0&len=' + _this.pageNum, {}, {  
  47.             headers: {}  
  48.         }).then(function (response) {  
  49.               
  50.         }).catch(function (response) {  
  51.             console.log(response);  
  52.         });  
  53.     }          
[javascript] view plain copy
 
 
  1. 方法一:直接在.vue文件中引入使用  
  2.   
  3. 在.vue文件中使用  
  4. <script>  
  5.   import axios from 'axios';  
  6.   export default {  
  7.     name: 'news',  
  8.     data () {  
  9.       return {  
  10.       }  
  11.     },  
  12.     methods: {  
  13.       getNewsFn(){  
  14.         axios.get(this.dataURL + '/getNews').then((news) => {  
  15.             this.news = news.data;  
  16.           }  
  17.         ).catch((err) => {  
  18.             console.log(err);  
  19.           }  
  20.         );  
  21.       }  
  22.     }  
  23.   }  
  24. </script>  
  25.   
  26.   
  27. 方法二:注册为全局的函数  
  28.   
  29. 首先在main.js文件中引入  
  30. import axios from '../node_modules/axios';  
  31.   
  32. Vue.prototype.axios = axios;  
  33.   
  34. new Vue({  
  35.   el: '#app',  
  36.   router,  
  37.   store,  
  38.   axios,  
  39.   echarts,  
  40.   template: '<App/>',  
  41.   components: { App }  
  42. });  
  43. 其次在.vue文件中使用  
  44.   defaultData(){  
  45.         let _this = this;  
  46.         _this.axios.get('http://' + _this.$store.state.defaultHttp + '?action_type=comp_news&comp_id=' + _this.$store.state.compValue + '&offset=0&len=' + _this.pageNum, {}, {  
  47.             headers: {}  
  48.         }).then(function (response) {  
  49.               
  50.         }).catch(function (response) {  
  51.             console.log(response);  
  52.         });  
  53.     }