vue axios封装 直接使用

utils => request.js

import axios from "axios";
import { Loading, MessageBox, Message } from "element-ui";
import store from "@/store";
import { getToken } from "@/utils/auth";

let loading = null;
let needLoadingRequestCount = 0;
let count = 0;

function startLoading() {
  loading = Loading.service({
    lock: true,
    text: "加载中……",
    spinner: "el-icon-loading",
    background: "rgba(0, 0, 0, 0.7)"
  });
}

function endLoading() {
  loading.close();
  loading = null;
}

export function showFullScreenLoading() {
  if (needLoadingRequestCount === 0) {
    startLoading();
  }
  needLoadingRequestCount++;
}

export function tryHideFullScreenLoading() {
  if (needLoadingRequestCount <= 0) return;
  needLoadingRequestCount--;
  if (needLoadingRequestCount === 0) {
    endLoading();
  }
}

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  //timeout: 5000 // request timeout
});

// request interceptor
service.interceptors.request.use(
  config => {
    // 可根据自己配置自由填写
    if (config.config == undefined) {
      showFullScreenLoading();
      count = 0;
    }
    // do something before request is sent
    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers["X-Token"] = getToken();
    }
    return config;
  },
  error => {
    // do something with request error
    // console.log(error); // for debug
    tryHideFullScreenLoading();
    return Promise.reject(error);
  }
);

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
   */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data;
    tryHideFullScreenLoading();
    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.message || "Error",
        type: "error",
        showClose: true,
        duration: 5 * 1000
      });

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm(
          "You have been logged out, you can cancel to stay on this page, or log in again",
          "Confirm logout",
          {
            confirmButtonText: "Re-Login",
            cancelButtonText: "Cancel",
            type: "warning"
          }
        ).then(() => {
          store.dispatch("user/resetToken").then(() => {
            location.reload();
          });
        });
      }
      return Promise.reject(new Error(res.message || "Error"));
    } else {
      return res;
    }
  },
  error => {
    tryHideFullScreenLoading();
    console.log("err" + error); // for debug
    if (count == 0) {
      Message({
        message: error.message || "网络链接失败",
        type: "error",
        duration: 5 * 1000
      });
    }
    count++;
    return Promise.reject(error);
  }
);

export default service;

api => http.js

import axios from "@/utils/request";
const getBaseUrl = function(url) {
  let baseUrl;
  if (process.env.NODE_ENV === "development") {
    baseUrl = url;
  } else {
    baseUrl = `http://${globalVarApi}`;
  }
  return baseUrl;
};
// 创建接口实例
const createInstance = {
  post: function(baseUrl = "", url = "", params = {}, config, options = {}) {
    return axios({
      method: "post",
      baseURL: getBaseUrl(baseUrl),
      url: url,
      data: params,
      config,
      ...options
    });
  },
  put: function(baseUrl = "", url = "", params = {}, options = {}) {
    return axios({
      method: "put",
      baseURL: getBaseUrl(baseUrl),
      url: url,
      data: params,
      ...options
    });
  },
  get: function(baseUrl = "", url = "", params = {}, config, options = {}) {
    return axios({
      method: "get",
      baseURL: getBaseUrl(baseUrl),
      url: url,
      params: params,
      config,
      ...options
    });
  },
  delete: function(baseUrl = "", url = "", params = {}, options = {}) {
    return axios({
      method: "delete",
      baseURL: getBaseUrl(baseUrl),
      url: url,
      params: params,
      ...options
    });
  }
};
export default createInstance;

api  => baseUrl.js

export default {
    renyonghuan: '/renyonghuan',
    ryhpc: '/pcrenyonghuan',
    ryhsc: '/screnyonghuan',
}

api => user.js

一:

import baseUrl from './baseUrl'
import axios from './http'
const seqApi = {
  // 获取线路车站
  GetLineStations(params) {
    return axios.post(baseUrl.ryhsc, '/miscs-sc/GetLineStations', params)
  },
}
export default seqApi

二:

import baseUrl from './baseUrl'
import axios from './http'

/**
 * 查询配置列表
 */
export function listSystemConfigs(params) {
  return axios.post(baseUrl.zengshihao, '/miscs-bim/systemConfig/listSystemConfigs', params)
}