vue ajax axios6,vue全局使用axios插件请求ajax

vue全局使用axios插件请求ajax

Vue 原本有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方宣布停止更新vue-resource，并推荐大家使用axios，越来越多的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目会使用 Vuex 来管理数据。

之前一直使用的是 vue-resource插件，在主入口文件引入import VueResource from 'vue-resource'之后，直接使用Vue.use(VueResource)之后即可将该插件全局引用了；

Axios 是一个基于 promise 的 HTTP 库，并没有install方法，所以是不能使用vue.use()方法的。

简单点就是每个文件引用一次，import axios from '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);

之后就可以全局使用this.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: 'zack'

}

},

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 可以在一起配合的事情不只是访问和展示一个 API。你也可以和 Serverless Function 通信，向一个有写权限的 API 发送发布/编辑/删除请求等等。由于这两个库的集成很简单直接，它便成为了需要在工作流中集成 HTTP 客户端的开发者的常见选择。

vue全局使用axios的方法

在vue项目开发中,我们使用axios的二次封装,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vu ...

vue中采用axios发送请求及拦截器

这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...

vue项目使用axios发送请求让ajax请求头部携带cookie

最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知ax ...

把axios挂载到vue实例上面/==Axios 各种请求方式传递参数格式

/*ajax请求*/   import axios from 'axios'   axios.defaults.baseURL = 'https://api.douban.com/v2/movie' ...

vue中使用axios发送请求

我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...

vue 使用axios 数据请求第三方插件的使用

axios 基于http客户端的promise,面向浏览器和nodejs 特色 浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 监听请求和返回 ...

Vue中使用axios发送ajax请求

作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...

随机推荐

清除Android工程中没用到的资源

项目需求一改再改,UI一调再调,结果就是项目中一堆已经用不到但却没有清理的垃圾资源,不说工程大小问题,对新进入项目的人或看其他模块的代码的人来说,这些没清理的资源可能也可能会带来困扰,所以最好还是清理 ...

Android Drawable 那些不为人知的高效用法

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43752383,本文出自:[张鸿洋的博客] 1.概述 Drawable在我们平时的 ...

初学JDBC，调用存储过程

在JDBC简单封装的基础上实现 public class UserDao{ public static void testGetUser(String userName) throws Excepti ...

js 解决原型问题的方案 ： 构造器和原型的组合