在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 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
Aug 03 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 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/12/03 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
jquery实现左右轮播图效果
2017/09/28 jQuery
详解JavaScript之ES5的继承
2020/07/08 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python实现简单图书管理系统
2019/11/22 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
在校生党员自我评价
2013/09/25 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
室内设计专业自荐信
2014/05/31 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
校长一岗双责责任书
2015/05/09 职场文书
公司借条范本
2015/05/25 职场文书
MySQL基础(一)
2021/04/05 MySQL
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏