Vue Axios Encapsulation Global use

"No ink directly on the Code series"

The code is divided into three steps:

1. Create a api.js, package Axios

2. Introduced in Main.js and added to the Vue prototype

3. Global use

1. Create + Package

//Api.jsImport Axios from "Axios";varApiurl = ' ';functionYuanajax (url,data,successcallback,errorcallback) {axios.post (Apiurl+ url,data). Then (function(res) {if(typeofSuccesscallback = = ' function ') {successcallback (res); }    })    .Catch(function(res) {if(errorcallback) {errorcallback (res); }})}export {Yuanajax}

2. Introduction + Add to Prototype

　

Import vue from ' Vue 'Import App from'./app 'Import Router from'./router '//introducedImport {Yuanajax} from './api 'Import Elementui from' Element-ui '; Import' Element-ui/lib/theme-chalk/index.css '; Import' @/assets/css/common.css '; Import' @/assets/css/font-awesome.min.css '; Vue.use (Elementui); Vue.config.productionTip=false;//Add to prototypeVue.prototype.yuanAjax =Yuanajax;NewVue ({el:' #app ', router, components: {App}, Template:' <App/> '})

3. Use

// Use this. Yuanajax ('/test ', {          A:1},function  (res) {  Console.log ( RES);})

Simple point, suitable for anxious items, haha

Vue Axios Encapsulation Global use