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实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
VUE安装使用教程详解
Jun 03 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
详解Vue 单文件组件的三种写法
Feb 19 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
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
在Django中使用Sitemap的方法讲解
2015/07/22 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
详解python解压压缩包的五种方法
2019/07/05 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
python 贪心算法的实现
2020/09/18 Python
迪拜航空官方网站:flydubai
2017/04/20 全球购物
研究生自荐信
2013/10/09 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
委托书的样本
2015/01/28 职场文书
老公出轨后的保证书
2015/05/08 职场文书
初中班主任教育随笔
2015/08/15 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs