在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操作ajax返回的json的注意问题!
Feb 23 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
javascript之Partial Application学习
Jan 10 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
详解JS面向对象编程
Jan 24 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
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之CodeIgniter学习笔记
2013/06/17 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
python打开网页和暂停实例
2014/09/30 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
Python自定义简单图轴简单实例
2018/01/08 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
Python实现代码统计工具
2019/09/19 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
物流专业大学应届生求职信
2013/11/03 职场文书
教导处工作制度
2014/01/18 职场文书
师生聚会感言
2014/01/26 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
万能检讨书
2015/01/27 职场文书
北京导游词
2015/02/12 职场文书
端午节寄语2015
2015/03/23 职场文书
公司放假通知范文
2015/04/14 职场文书
2015年派出所工作总结
2015/04/24 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书