VueAxios, axios 引入, 为什么需要 vue-axios?

引入 Vue

在 resources/js/app.js 文件中, 以下两种写法都可以引入Vue, 使用其中一种即可:

window.Vue = require('vue'); 

import Vue from 'vue'; 

引入 axios

错误示范

这种写法不支持, 因为 axios 是第三方库, 不是vue的插件

/** 错误写法
 * import axios from 'axios';
 * Vue.use(axios) 
 */

当作插件文档引入

按照Vue的插件文档来写, 更符合 Vue 整体生态环境, vue-axios 是将 axios 集成到 Vue.js 的小包装器，可以像插件一样进行安装：

import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);

前端用法:

this.axios.get(api).then((response)=>{
    console.log(response.data);
})

或

Vue.axios.get(api).then((response)=>{
    console.log(response.data);
}); 

或

this.$http.get(api).then((response)=>{
    console.log(response.data);
})

可以了解下 vue-axios 的源码, $http, axios 是 axios 在 Vue.prototype 原型中的绑定名称,.

(function () {

/**
 * Install plugin
 * @param Vue
 * @param axios
 */

function plugin(Vue, axios) {

  if (plugin.installed) {
    return
  }
  plugin.installed = true

  if (!axios) {
    console.error('You have to install axios')
    return
  }

  Vue.axios = axios

  Object.defineProperties(Vue.prototype, {

    axios: {
      get() {
        return axios
      }
    },

    $http: {
      get() {
        return axios
      }
    }

  })
}

if (typeof exports == "object") {
  module.exports = plugin
} else if (typeof define == "function" && define.amd) {
  define([], function(){ return plugin })
} else if (window.Vue && window.axios) {
  Vue.use(plugin, window.axios)
}

})();

原型绑定引入

在原型上进行绑定, 直接写原型链, 注册一个$http，和项目其他成员协作的时候就必须注明你注册的变量名称，而使用vue-axios大家就没有歧义, 因此此用法不推荐.

import axios from 'axios';
Vue.prototype.$http = axios; 
// 也可以写成  Vue.prototype.$axios = axios, 调用, this.$axios;

在模版引擎中用法是:

// 为给定 ID 的 user 创建请求: 
this.$http.get('user?id=12345')
    .then(function(response){
		console.log(response);
	})
    .catch(function(error){
		console.log(error);
    }) 

或者这么写

this.$http.get('/user', {
		params: { id: 12345 }
	})
	.then(function(response){
		console.log(response);
	})
	.catch(function(error){
		console.log(error);
	})

实际引入

Laravel 项目中由于 npm install 自动安装了 axios, 并在 resources/js/bootstrap.js 中自动挂载到 window:

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

实际, 只需要在 resources/js/app.js 文件中把 axios 注册到 Vue 原型中即可, 不需要再次引入.

require('./bootstrap');
window.Vue = require('vue');
Vue.prototype.axios = window.axios;

前端中使用:

this.axios.get(api).then((response)=>{
	return response.data;
})