vue全局使用axios的方法实例详解


Posted in Javascript onNovember 22, 2018

在vue项目开发中,我们使用axios进行ajax请求,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vue-resource'之后,直接使用Vue.use(VueResource)之后即可将该插件全局引用了,所以axios这样使用的时候就报错了,很懵逼。

仔细看看文档,就知道axios 是一个基于 promise 的 HTTP 库,axios并没有install 方法,所以是不能使用vue.use()方法的。☞查看vue插件

那么难道我们要在每个文件都要来引用一次axios吗?多繁琐!!!解决方法有很多种:

1.结合 vue-axios使用
2.axios 改写为 Vue 的原型属性
3.结合 Vuex的action

1.结合 vue-axios使用

看了vue-axios的源码,它是按照vue插件的方式去写的。那么结合vue-axios,就可以去使用vue.use方法了

首先在主入口文件main.js中引用:

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

之后就可以使用了,在组件文件中的methods里去使用了:

getNewsList(){
   this.axios.get('api/getNewsList').then((response)=>{
    this.newsList=response.data.data;
   }).catch((response)=>{
    console.log(response);
   })
}

2.axios 改写为 Vue 的原型属性(不推荐这样用)

首先在主入口文件main.js中引用,之后挂在vue的原型链上:

import axios from 'axios'
Vue.prototype.$ajax= axios

在组件中使用:

this.$ajax.get('api/getNewsList')
.then((response)=>{
  this.newsList=response.data.data;
}).catch((response)=>{
  console.log(response);
})

3.结合 Vuex的action

在vuex的仓库文件store.js中引用,使用action添加方法

import Vue from 'Vue'
import Vuex from 'vuex'

import axios from 'axios'

Vue.use(Vuex)
const store = new Vuex.Store({
 // 定义状态
 state: {
  user: {
   name: 'xiaoming'
  }
 },
 actions: {
  // 封装一个 ajax 方法
  login (context) {
   axios({
    method: 'post',
    url: '/user',
    data: context.state.user
   })
  }
 }
})

export default store

在组件中发送请求的时候,需要使用 this.$store.dispatch

methods: {
 submitForm () {
  this.$store.dispatch('login')
 }
}

总结

以上所述是小编给大家介绍的vue全局使用axios的方法实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
JS原型与继承操作示例
May 09 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
vue中的ref和$refs的使用
Nov 22 #Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 #Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 #Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 #Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 #Javascript
微信上传视频文件提示(推荐)
Nov 22 #Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 #Javascript
You might like
在php中取得image按钮传递的name值
2006/10/09 PHP
一个好用的分页函数
2006/11/16 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
Python的print用法示例
2014/02/11 Python
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
上海微创软件面试题
2012/06/14 面试题
工伤赔偿协议书
2014/04/15 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏