axios封装

src下新建request文件夹,在request文件夹下

1.index.js

// http.js
import axios from "axios";
// 环境的切换
// if (process.env.NODE_ENV === "development") {
//   axios.defaults.baseURL = "http://www.baidu.com";
// } else if (process.env.NODE_ENV === "production") {
//   axios.defaults.baseURL = "http://www.baidu.com";
// }
import { Message, Loading } from "element-ui";

import baseUrl from "./baseUrl";
const service = axios.create({
  baseURL: baseUrl,
  timeout: 10000,
  headers: {
    common: {
      "X-Requested-With": "XMLHttpRequest"
    }
  }
});
let loadingInstance;

let options = {
  //loading 的配置参数
  lock: true,
  text: "Loading",
  spinner: "el-icon-loading",
  background: "rgba(0, 0, 0, 0.7)"
};
// 请求拦截器
service.interceptors.request.use(
  function (config) {
    loadingInstance = Loading.service(options); //显示loading
    // config.data = config.data; //根据后端数据格式，可做相应的数据转换 JSON.stringify() 或 qs.stringify()
    //设置header的配置信息，跟后端配合设置
    // config.headers = {
    //     'Content-Type':'application/x-www-form-urlencoded'
    // }

    //设置 token ,根据需要设置
    // const token = getCookie('token');
    // if(token){
    //     config.params = {'token':token};
    //     config.headers.token = token;
    // }
    return config;
  },
  function (error) {
    loadingInstance.close();
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  function (response) {
    loadingInstance.close();
    return response;
  },
  function (error) {
    loadingInstance.close();
    if (error || error.response) {
      switch (error.response.status) {
        case 400:
          error.message = "错误请求";
          break;
        case 401:
          error.message = "未授权，请重新登录";
          break;
        case 403:
          error.message = "拒绝访问";
          break;
        case 404:
          error.message = "请求错误,未找到该资源";
          window.location.href = "/notFound";
          break;
        case 405:
          error.message = "请求方法未允许";
          break;
        case 408:
          error.message = "请求超时";
          break;
        case 500:
          error.message = "服务器端出错";
          break;
        case 501:
          error.message = "网络未实现";
          break;
        case 502:
          error.message = "网络错误";
          break;
        case 503:
          error.message = "服务不可用";
          break;
        case 504:
          error.message = "网络超时";
          break;
        case 505:
          error.message = "http版本不支持该请求";
          break;
        default:
          error.message = `连接错误${error.response.status}`;
      }
    } else {
      if (JSON.stringify(error).includes("timeout")) {
        Message.error("服务器响应超时，请刷新当前页");
      }
      error.message("连接服务器失败");
    }

    Message.error(error.message);
    return Promise.resolve(error.response);
  }
);
export default service;

2.http.js

//http.js

import request from "./index";
const http = {
  get(url, params) {
    const config = {
      method: "get",
      url: url
    };
    if (params) config.params = params;
    return request(config);
  },
  post(url, params) {
    const config = {
      method: "post",
      url: url
    };
    if (params) config.data = params;
    return request(config);
  },
  put(url, params) {
    const config = {
      method: "put",
      url: url
    };
    if (params) config.params = params;
    return request(config);
  },
  delete(url, params) {
    const config = {
      method: "delete",
      url: url
    };
    if (params) config.params = params;
    return request(config);
  }
};

export default http;

3.api.js

// import axiosService from "./index.js";

// // 下面是POST形式
// export const userLogin = (data) => {
//   return axiosService({
//     url: "/ft-addr-op/sys/login", // 根据实际接口地址来写
//     method: "post",
//     data
//   });
// };

// // 下面是GET形式
// export const userInfo = (params) => {
//   return axiosService({
//     url: "/xxxx/user/xxxx", // 根据实际接口地址来写
//     method: "get",
//     params
//   });
// };

import http from "./http.js";
// 下面是POST形式
export const userLogin = (data) => {
  return http.post(
    "/ft-addr-op/sys/login", // 根据实际接口地址来写
    data
  );
};

// 下面是GET形式
export const userInfo = (params) => {
  return http.get(
    "/xxxx/user/xxxx", // 根据实际接口地址来写
    params
  );
};
export function getListAPI(params) {
  return http.get(`getList.json`, params);
}

4.baseUrl.js

let baseUrl = "";
switch (
  process.env.NODE_ENV //注意变量名是自定义的
) {
  case "development":
    baseUrl = "http://10.82.182.230:8087"; //开发环境url
    break;
  case "production":
    baseUrl = "http://localhost:8089/"; //生产环境url
    break;
}
export default baseUrl;