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 相关文章推荐
jQuery 选择器、DOM操作、事件、动画
Nov 25 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
微信小程序实现的图片保存功能示例
Apr 24 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 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图片验证码代码
2008/03/27 PHP
php5 图片验证码实现代码
2009/12/11 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
住房公积金接收函
2014/01/09 职场文书
校园歌手大赛策划书
2014/01/17 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang