Vue统一请求封装

api请求封装

import axios from "axios";
import util from "@/libs/util";  //Cookies设置
import { Message } from "element-ui";

function showErrorMessage(message, type = "error") {
  Message({
    message: message,
    type: type
  });
}

function getBaseUrl() {
  var baseURL = "http://www.fff.ffff:3000";
  return baseURL;
}

// 创建一个 axios 实例
const service = axios.create({
  baseURL: "",
  // timeout: 20000 // 请求超时时间
});

// request 请求拦截器
service.interceptors.request.use(
  config => {
    const token = util.cookies.get("token");
    config.headers["Authorization"] = "Bearer " + token;
    config.headers["Content-Language"]="Zh";
    if (!config.url.startsWith("http")) {
      let baseUrl = getBaseUrl();
      baseUrl = baseUrl.endsWith("/") ? baseUrl : baseUrl + "/";
      let apiUrl = config.url.startsWith("/")
        ? config.url.substring(1, config.url.length)
        : config.url;
      config.url = baseUrl + apiUrl;
    }
    return config;
  },
  error => {
    // 发送失败
    return Promise.reject(error);
  }
);
 
// response 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    const { code, success } = res;
    if (code === undefined || success === undefined) {
      // 如果没有 code success 代表这不是项目后端开发的接口
      showErrorMessage("接口返回数据不满足UI要求");
    }
    return res;
  },
  async error => {
    
    let res = { success: false, code: 0, message: "" };
    if (error.response) {
      var data = error.response.data;
      if (_.isPlainObject(data)) {
        console.log("error",data);
        res = {
          success: false,
          code: error?.response?.data?.status
            ? error?.response?.data?.status
            : 0,
          message: error.message,
          ...error.response.data
        };
      } else if (_.isString(data)) {
        if (_.isNumber(error.response.status)) {
          res.code = error.response.status;
        }
        res.message = data || error.response.statusText;
      }
    } else {
      res.message = error.message;
    }
    return res;
  }
);

export default service;

Cookies 值设置文件

import Cookies from "js-cookie"; //npm i js-cookie -S
const cookies = {};

/**
 * @description 存储 cookie 值 
 * @param {String} value cookie value
 * @param {Object} cookieSetting cookie setting
 */
cookies.set = function(name = "default", value = "", cookieSetting = {}) {
  let currentCookieSetting = {
    expires: 1  //Cookies 默认保存时间，单位：天
  };
  Object.assign(currentCookieSetting, cookieSetting);
  Cookies.set(`admin-${name}`, value, currentCookieSetting);
};

/**
 * @description 拿到 cookie 值
 * @param {String} name cookie name
 */
cookies.get = function(name = "default") {
  return Cookies.get(`admin-${name}`);
};

/**
 * @description 拿到 cookie 全部的值
 */
cookies.getAll = function() {
  return Cookies.get();
};

/**
 * @description 删除 cookie
 * @param {String} name cookie name
 */
cookies.remove = function(name = "default") {
  return Cookies.remove(`admin-${name}`);
};

export default cookies;

api文件使用

 import request from "@/request/xdIndex.js";

 // 模块名
const module = "XD";
// 控制器名
const controller = "XDLogistics";
// 路径
const path = `${module}/${controller}`;
 

// 查询
 export const getPageList = (params) => {
   return request.post(`/api/v2/${path}/GetdataList`, params);
 };