关于axios如何全局注册浅析


Posted in Javascript onJanuary 14, 2018

前言

最近用 Vue 写项目的时候,用到 axios ,因为 axios 不能用 Vue.use() (详细介绍可以参考这篇文章),所以在每个 .vue 文件中使用 axios 时就需要 import , .vue 文件少的话还好说,多的话未免有点麻烦。

后来想了想,能不能直接把 axios 加到 Vue 的原型中,这样就达到了全局注册了。下面话不多说了,来一看看详细的介绍吧。

方法如下:

1. 首先在 main.js 中引入 axios

import Vue from 'vue'
import axios from 'axios'
//把 `axios` 加到 `Vue` 的原型中
Vue.prototype.axios = axios;
new Vue({
 el: '#app',
 render:h => h(App)
})

2. 在 .vue 文件中使用时,注意  axios 前要加  this

<script>
export default {
 name:'app',
 data(){
  return{
   msg:'hello'
  }
 },
 methods:{
  send(){
   // 注意:因为 axios 是加到 Vue 的原型中了,所以使用 axios 方法时,前面需要加 this
   this.axios.get('https://www.baidu.com*******')
   .then(resp => {
    console.log(resp.data)
   }).catch(err => {
    console.log(err);
   })
  }
 }
}
</script>

嗯,就这样,结果当然是没有问题的啦!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
符合标准的js表单提交的代码
Sep 13 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 #Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 #Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 #Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 #Javascript
vuejs实现递归树型菜单组件
Jan 13 #Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 #Javascript
详解基于vue-cli配置移动端自适应
Jan 13 #Javascript
You might like
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
php删除数组元素示例分享
2014/02/17 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
JavaScript this调用规则说明
2010/03/08 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
JavaScript中this详解
2015/09/01 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
python编辑用户登入界面的实现代码
2018/07/16 Python
python实现五子棋小游戏
2020/03/25 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
WiFi云数码相框:Nixplay
2018/07/05 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
幼儿园教师培训方案
2014/02/04 职场文书
可口可乐广告词
2014/03/20 职场文书
《海底世界》教学反思
2014/04/16 职场文书
大学生村官考核材料
2014/05/23 职场文书
债务纠纷委托书
2014/08/30 职场文书
2015年高校就业工作总结
2015/05/04 职场文书