vue全局使用axios的操作


Posted in Javascript onSeptember 08, 2020

在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);
})

结合 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')
 }
}

补充知识:ElementUI 在VUE中配置 main.js与axios的关系

一、在main.js中:

import ElementUI from 'element-ui'

Vue.use(ElementUI)

二、在main.js中,数据请求axios不能在这里配置

以上这篇vue全局使用axios的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
React key值的作用和使用详解
Aug 23 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
Vue自定义多选组件使用详解
Sep 08 #Javascript
vue项目中微信登录的实现操作
Sep 08 #Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 #Javascript
快速解决element的autofocus失效问题
Sep 08 #Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 #Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 #Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 #Javascript
You might like
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
js中匿名函数的N种写法
2010/09/08 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
vue.js学习之UI组件开发教程
2017/07/03 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
政协调研汇报材料
2014/08/15 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
先进学校事迹材料
2014/12/30 职场文书
化验室安全管理制度
2015/08/06 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL