zdz8207

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()方法的。

使用 axios 访问 API — Vue.js
https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html


简单点就是每个文件引用一次,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 客户端的开发者的常见选择。

 

分类:

技术点:

相关文章: