分享我封装的axios

Sat, Nov 23, 2019

src/axios/http.js

import axios from "axios";
import router from "../router";
import store from "../store/store";
import { Message } from "element-ui";
import apiConfig from '../../config/api.config'
import qs from 'qs'
// let loadingInstance = Loading.service({ fullscreen: true });

const tip = msg => {
  Message({
    showClose: true,
    message: msg,
    type: "error"
  });
};

let tipBanMessage = (function() {
	var index =0;
	return {
		show: function(msg) {
			if(index === 0) {
        index = 1;
        tip(msg);
			}
		},
		init: function() {
			index= 0;
		}
	}
})();


const concatData = function(data){
  const defaultData = {
      userGuid: localStorage.getItem('guid')
  };
  return typeof data === 'object'&& Object.keys(data).length ? {...defaultData,...data}:defaultData;
}

const toLogin = () => {
  router.replace({
    path: "/login",
    query: {
      redirect: router.currentRoute.fullPath
    }
  });
};


const errorHandle = (status, other) => {

  switch (status) {

    case 401:
      toLogin();
      break;
    case 403:
      tip("登录过期，请重新登录");
      localStorage.removeItem("token");
      store.commit("loginSuccess", null);
      setTimeout(() => {
        toLogin();
      }, 1000);
      break;
    case 404:
      tip("请求的资源不存在");
      break;
    default:
      console.log(other);
  }
};


var instance = axios.create({
  baseURL: apiConfig.baseUrl,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  timeout: 5000,
  transformRequest: [function (data, headers) {
    // 混入全局所需token
    return JSON.stringify(concatData(data));
  }],
});

instance.interceptors.request.use(
  config => {
    const token = store.state.token;
    token && (config.headers.Authorization = token);
    return config;
  },
  error => {
    return Promise.error(error)
  }
);


instance.interceptors.response.use(

  res => {
    if (res.status >= 200 && res.status < 300) {
      let data = res.data;
      if (data.code < 0 || data.code===1) {
        let message = data.message;
        if(message.includes("账号不可用")) {
          tipBanMessage.show(message);
          new Promise(function(resolve){
            store.dispatch("ban");
            resolve();
          }).then(function() {
            router.push("/");
          })
        }
        return Promise.reject(data);
      } else {
        return Promise.resolve(data);
      }
    }
    return Promise.reject(res);
  },

  error => {
    const { response } = error;
    if (response) {
      errorHandle(response.status, response.data.message);
      return Promise.reject(response);
    } else {
      if (!window.navigator.onLine) {
        store.commit("changeNetwork", false);
      } else {
        return Promise.reject(error);
      }
    }
  }
);

export default instance;

src/axios/api/myPurse.js

/** 
 * 
 * 我的钱包接口
*/
import axios from '../http'
import qs from 'qs'
import store from '../../store/store'


const tel = function() {
    return store.state.tel
}
 const accountBaseUrl = '/api/balanceAccount';
// 获取账户余额

const balance = function(data) {
    return axios.post(`${accountBaseUrl}/balance`,data);
}
// 提现申请
 const withdraw = function(data) {
    data.contactPhone = tel();
    return axios.post(`${accountBaseUrl}/withdraw`,data);
}

// 交易记录
 const transactionRecords = function(data) {
    return axios.post(`${accountBaseUrl}/transactionRecords`,data);
}

// 设置（重置）交易密码
const resetTransactionPassword = function(data) {
    data.phone = tel();
    return axios.post(`${accountBaseUrl}/resetTransactionPassword`,data);
}


// 是否修改交易密码
const isTradePasswordSet = function(data) {
    return axios.post(`${accountBaseUrl}/isTradePasswordSet`,data);
}


// 修改交易密码
 const updateTransactionPassword = function(data) {
    return axios.post(`${accountBaseUrl}/updateTransactionPassword`,data);
}

// 托管资金
 const deposit = function(data) {
    return axios.post(`/api/tenderee/deposit`,data);
}

// 充值金额
const recharge = function(data) {
    return axios.post(`${accountBaseUrl}/recharge`,data);
}

const settleAccount = function(data) {
    return axios.post(`/api/tenderee/settleAccount`,data);
}



export default {
    balance,
    withdraw,
    transactionRecords,
    resetTransactionPassword,
    isTradePasswordSet,
    updateTransactionPassword,
    deposit,
    recharge,
    settleAccount
}