关于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 相关文章推荐
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
Django框架视图函数设计示例
2019/07/29 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
几个数据库方面的面试题
2016/07/01 面试题
美德好少年主要事迹
2014/01/29 职场文书
质检部经理岗位职责
2014/02/19 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
杨善洲观后感
2015/06/04 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
python tkinter模块的简单使用
2021/04/07 Python
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL
OpenFeign实现远程调用
2022/08/14 Java/Android