vue axios 封裝 全域使用

標籤：post   func   dex   bsp   代碼   some   nbsp   項目   import   

【不墨跡直接上碼系列】

  代碼分三步：

　　1. 建立一個api.js，封裝axios

　　2. 在main.js引入，並加到vue原型上

　　3. 全域使用

 

　　1. 建立+封裝  

//api.jsimport axios from "axios";var apiUrl = ‘‘;function yuanAjax(url,data,successCallback,errorCallback) {    axios.post(apiUrl + url,data).then(function (res) {        if( typeof  successCallback == ‘function‘) {            successCallback(res);        }    })    .catch(function (res) {        if (errorCallback) {            errorCallback(res);        }    })}export {    yuanAjax}

　2.引入+添加到原型

　

import Vue from ‘vue‘import App from ‘./App‘import router from ‘./router‘//引入import {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;//添加到原型Vue.prototype.yuanAjax = yuanAjax;new Vue({  el: ‘#app‘,  router,  components: { App },  template: ‘<App/>‘})

3. 使用

//使用this.yuanAjax(‘/test‘,{          a:1},function (res) {  console.log(res);})

 

 

簡單了點，適用著急的項目， 哈哈

 

vue axios 封裝 全域使用