码迷,mamicode.com
首页 > 移动开发 > 详细

vue axios 封装 全局使用

时间:2018-08-08 13:30:19      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:post   func   dex   bsp   代码   some   nbsp   项目   import   

【不墨迹直接上码系列】

  代码分三步:

  1. 创建一个api.js,封装axios

  2. 在main.js引入,并加到vue原型上

  3. 全局使用


 

  1. 创建+封装  

//api.js
import 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 封装 全局使用

标签:post   func   dex   bsp   代码   some   nbsp   项目   import   

原文地址:https://www.cnblogs.com/shouhe/p/9441883.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!