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 相关文章推荐
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
vue中使用props传值的方法
May 08 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
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
php中函数的形参与实参的问题说明
2010/09/01 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
Python中datetime模块参考手册
2017/01/13 Python
Python人脸识别初探
2017/12/21 Python
Python unittest模块用法实例分析
2018/05/25 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
python opencv肤色检测的实现示例
2020/12/21 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
竞职演讲稿范文
2014/01/11 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
裁员通知
2015/04/25 职场文书
2015年党小组工作总结
2015/05/26 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
python 管理系统实现mysql交互的示例代码
2021/12/06 Python