vue开发公共模块封装（http）

本文主要分享基于vue的移动端ui框架vux简单封装Axios作为我们项目的公共http模块。代码如下：

import Vue from 'vue';
import Axios from 'axios';
import { Promise } from 'es6-promise';
import user from '../store/modules/user'
import server from '../config/hostConfig'

Axios.defaults.timeout = 30000; // 1分钟
Axios.defaults.baseURL = server.target; 

Axios.interceptors.request.use(function(config) {
// Do something before request is sent 
//change method for get
/*if(process.env.NODE_ENV == 'development'){
 config['method'] = 'GET';
 console.log(config)
 }*/
if(config['MSG']){
    Vue.prototype.$showLoading(config['MSG']);
  }else{
    Vue.prototype.$showLoading();
  }
if(user.state.token){//用户登录时每次请求将token放入请求头中
    config.headers["token"] = user.state.token;
  }

if (config['Content-Type'] === 'application/x-www-form-urlencoded;') {//默认发application/json请求，如果application/x-www-form-urlencoded;需要使用transformRequest对参数进行处理
/*config['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';*/
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    config['transformRequest'] = function(obj) {
var str = [];
for (var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&")
    };
  }
//config.header['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

return config;
}, function(error) {
// Do something with request error 
  Vue.$vux.loading.hide()
return Promise.reject(error);
});

Axios.interceptors.response.use(
  response => {
    Vue.$vux.loading.hide();
return response.data;
  },
  error => {
    Vue.$vux.loading.hide();
if (error.response) {
switch (error.response.status) {
case 404:
          Vue.prototype.$alert("404未找到请求的资源");
break;
default:
          Vue.prototype.$alert('网络错误');
      }
    } else if (error instanceof Error) {
      console.error(error.message);
    } else {
      Vue.prototype.$alert(error.returnMsg);
    }

return Promise.reject(error.response.data);
  });

export default Vue.prototype.$http = Axios;

上述代码把http扩展到了vue的原型中，然后我们便可以在组件中方便的使用http，比如：

mobileLogin() {
let self = this;
let param = {
        mobile: this.mobile,
        password: this.mobilePw
      }
self.$http.post('/api/mobile/general/login', param).then((result) => {
if (result.success) {
self.USER_SIGNIN({
              token: result.data.token,
              accountInfo: result.data.accountInfo,
              nsrInfo: result.data.nsrInfo
            });
self.$router.push({
              name: 'chooseIdentity',
params: {
                isFromLogin: true
              }
            }); //isFromLogin 1代表从login路由
          } else {
self.$alert(result.message);
          }
/* return result*/
        })
    }

这样的话我们使用起来是不是方便了很多？嘿嘿，更多axios的用法请参考axios用法
关于vux的用法请参考：vux用法