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压缩工具:X2JSCompactor
Jun 13 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
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
用Zend Encode编写开发PHP程序
2010/02/21 PHP
php进程间通讯实例分析
2016/07/11 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
理解Javascript_10_对象模型
2010/10/16 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
Python深入06——python的内存管理详解
2016/12/07 Python
python妙用之编码的转换详解
2017/04/21 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Pytorch 实现权重初始化
2019/12/31 Python
python requests.get带header
2020/05/05 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
pytorch中index_select()的用法详解
2021/01/06 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
工作疏忽检讨书
2014/01/25 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
工作评语大全
2014/04/26 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS