在Vue组件化中利用axios处理ajax请求的使用方法


Posted in Javascript onAugust 25, 2017

本文主要给大家介绍了关于在Vue组件化中利用axios处理ajax请求的使用方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

推荐方式

首先在 main.js 中引入 axios

// 引入 axios
import axios from 'axios'

这时候如果你想在其它的组件中使用axios进行ajax请求是或提示报错的,报错内容大致是axios is undefined。

我们通常的决绝方案是将axios改写为 Vue 的原型属性,如2

将axios写入Vue的原型链作为Vue的属性

// 设置axios请求的默认host
axios.defaults.baseURL = "https://www.ifilm.ltd/api/"
// 将axios绑定给vue成为一个属性
Vue.prototype.$http = axios

在其他组件中使用axios

this.$http.get('路由').then(response => {
  // todo something
  })

此方式可以类比到Vue的其他库使用

两种不推荐的使用示范

将axios全局化,作为全局变量

// 引入axios
import axios from 'axios'
// 将axios全局化
window.axios = axios;

另外一个不太优雅的方式就是在需要的每个组件中都引入对应的库

总结

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

Javascript 相关文章推荐
强制设为首页代码
Jun 19 Javascript
记录几个javascript有关的小细节
Apr 02 Javascript
List Installed Software Features
Jun 11 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 #Javascript
JavaScript数据类型的存储方法详解
Aug 25 #Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 #Javascript
Vue.js实现网格列表布局转换方法
Aug 25 #Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 #Javascript
Angular2 组件交互实例详解
Aug 24 #Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 #jQuery
You might like
php 无限级缓存的类的扩展
2009/03/16 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
php中session与cookie的比较
2015/01/27 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
python数据处理实战(必看篇)
2017/06/11 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
python占位符输入方式实例
2019/05/27 Python
python打开使用的方法
2019/09/30 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
Python3 元组tuple入门基础
2020/02/09 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
医院2014国庆节活动策划方案
2014/09/21 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
学历证明样本
2015/06/16 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
Python time库的时间时钟处理
2021/05/02 Python
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL