devbox
煮酒与君饮
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue2.0之axios使用详解_vue2 axios 引入直接用吗

作者：煮酒与君饮 | 2024-08-19 08:38:14

赞

踩

vue2 axios 引入直接用吗


[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.     }          
[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.     }          
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/煮酒与君饮/article/detail/1001542
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号