前端必备工具类

Http请求工具

注意，大部分情况下，我们后端返回的数据格式都是类似

{
  "code": 0,
  "data": {},
  "msg": ""
}

所以我们在请求工具中可以统一检查 code，如果返回正确则只返回 data 中的数据

import axios from 'axios';

// 创建axios实例
var instance = axios.create({
  timeout: 120000,
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  }
});

axios.defaults.withCredentials = true;
// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    return response;
  },
  function (error) {
    // todo 这里可以统一拦截非200状态响应
    return Promise.reject(error);
  });

/**
 * 发送 GET 请求，当 code 的值等于期望的值时解析 response.data.data
 *
 * 否则拒绝，并传递 data.message 或 data.msg
 *
 * @param {String} url url
 * @param {Number} expectedCode 返回值中期望得到的code值，默认0
 */
function getForData(url, expectedCode = 0) {
  return getWithParamsForData(url, {}, expectedCode);
}

/**
 * 发送 GET 请求，当 code 的值等于期望的值时解析 response.data
 *
 * 否则拒绝，并传递 data.message 或 data.msg
 *
 * @param {String} url url
 * @param {Number} expectedCode 返回值中期望得到的code值，默认0
 */
function get(url, expectedCode = 0) {
  return getWithParams(url, {}, expectedCode);
}

/**
 * 发送 GET 请求，当 code 的值等于期望的值时解析 response.data.data
 *
 * 否则拒绝，并传递 data.message 或 data.msg
 *
 * @param {String} url url
 * @param {Object} params 参数
 * @param {Number} expectedCode 返回值中期望得到的code值，默认 0
 */
function getWithParams(url, params, expectedCode = 0) {
  return new Promise((res, rej) => {
    instance.get(url, {
      params
    }).then(response => {
      handleResponse(response, res, rej, expectedCode);
    }).catch(e => {
      console.error(e);
      rej("请求出错");
    });
  })
}

/**
 * 发送 GET 请求，当 code 的值等于期望的值时解析返回后台数据中的 data 字段
 *
 * 否则拒绝，并传递 data.message 或 data.msg
 *
 * @param {String} url url
 * @param {Object} params 参数
 * @param {Number} expectedCode 返回值中期望得到的code值，默认0
 */
function getWithParamsForData(url, params, expectedCode = 0) {
  return new Promise((res, rej) => {
    instance.get(url, {
      params
    }).then(response => {
      handleResponseForData(response, res, rej, expectedCode);
    }).catch(e => {
      console.error(e);
      rej("请求出错");
    });
  })
}

/**
 * 发送 DELETE 请求，当 code 的值等于期望的值时返回完整后台数据
 *
 * 否则拒绝，并传递 data.message 或 data.msg
 * @param {String} url url
 * @param {Number} expectedCode 正确的code，默认 0
 */
function del(url, expectedCode = 0) {
  return new Promise((res, rej) => {
    instance.delete(url)
      .then(response => {
        handleResponse(response, res, rej, expectedCode);
      }).catch(e => {
      console.error(e);
      rej("请求出错");
    });
  })
}

function delWithParams(url, params, expectedCode = 0) {
  return new Promise((res, rej) => {
    instance.delete(url, {data: params})
      .then(response => {
        handleResponse(response, res, rej, expectedCode);
      })
      .catch(e => {
        console.log(e);
        rej("请求出错");
      })
  })
}

/**
 * 发送 POST 请求，当 code 的值等于期望的值时返回完整后台返回的数据
 *
 * 否则拒绝，并传递 data.message 或 data.msg
 * @param {String} url url
 * @param {Object} params 参数
 * @param {Number} expectedCode 正确的code，默认 0
 */
function post(url, params, expectedCode = 0) {
  return new Promise((res, rej) => {
    instance.post(url, params)
      .then(response => {
        handleResponse(response, res, rej, expectedCode);
      }).catch(e => {
      console.error(e);
      rej("请求出错");
    });
  })
}

function put(url, params, expectedCode = 0) {
  return new Promise((res, rej) => {
    instance.put(url, params)
      .then(response => {
        handleResponse(response, res, rej, expectedCode);
      }).catch(e => {
      console.error(e);
      rej("请求出错");
    });
  })
}

/**
 * 发送 POST 请求，当 code 的值等于期望的值时返回后台数据中的 data 字段
 *
 * 否则拒绝，并传递 data.message 或 data.msg
 * @param {String} url url
 * @param {Object} params 参数
 * @param {Number} expectedCode 正确的code，默认 0
 */
function postForData(url, params, expectedCode = 0) {
  return new Promise((res, rej) => {
    instance.post(url, params)
      .then(response => {
        handleResponseForData(response, res, rej, expectedCode);
      }).catch(e => {
      console.error(e);
      rej("请求出错");
    });
  })
}

function putForData(url, params, expectedCode = 0) {
  return new Promise((res, rej) => {
    instance.put(url, params)
      .then(response => {
        handleResponseForData(response, res, rej, expectedCode);
      }).catch(e => {
      console.error(e);
      rej("请求出错");
    });
  })
}

/**
 * 处理响应，若请求成功则 res(result.data)
 */
function handleResponseForData(response, res, rej, expectedCode) {
  let result = response.data;
  if (result.code === expectedCode) {
    // 后台返回数据只取 data 字段
    res(result.data);
  } else {
    console.warn("请求失败:", result);
    rej(result.message || result.msg || "请求失败");
  }
}

/**
 * 处理响应，若请求成功则 res(完整后台返回数据)
 */
function handleResponse(response, res, rej, expectedCode) {
  let result = response.data;
  if (result.code === expectedCode) {
    // 完整后台返回数据
    res(result);
  } else {
    console.warn("请求失败:", result);
    rej(result.message || result.msg || "请求失败");
  }
}
export default {
  get,
  getForData,
  getWithParams,
  getWithParamsForData,
  post,
  postForData,
  put,
  putForData,
  del,
  delWithParams,
}

缓存工具（支持过期时间）

在实践开发中，我们经常会设置缓存，并且希望可以给缓存设置一个过期时间，但是浏览器的缓存 API 并不支持过期时间，所以我们再封装一下，在设置缓存的时候，把当前时间戳记录下来，然后在取数据的时候计算一下是否过期，这样就能支持缓存过期时间了。

但是这样的做法有一个内存泄露的隐患，如果你的缓存数据较大，需要自己清理过期数据。

/**
 * 设置 sessionStorage 缓存
 * 
 * @param {*} key 键
 * @param {*} value 值
 */
function set(key, value) {
  let storage = window.sessionStorage;
  if (storage) {
    storage.setItem(key, value);
  }
}

/**
 * 设置 localStorage 缓存
 * @param {*} key 键
 * @param {*} value 值
 */
function setLocalStorage(key, value) {
  let storage = window.localStorage;
  if (storage) {
    storage.setItem(key, value);
  }
}
/**
 * 设置一个带有当前时间的 sessionStorage 缓存
 * 
 * 使用这个方法设置的缓存会保存一个时间戳，这样在调用 get 方法时支持过期时间
 * 
 * @param {*} key 键
 * @param {*} value 值
 */
function setWithTime(key, value) {
  let storage = window.sessionStorage;
  if (storage) {
    let tmp = {
      value: value,
      time: new Date().getTime()
    };
    storage.setItem(key, JSON.stringify(tmp));
  }
}

/**
 * 设置一个带有当前时间的 localStorage 缓存
 * 
 * 使用这个方法设置的缓存会保存一个时间戳，这样在调用 get 方法时支持过期时间
 * 
 * @param {*} key 键
 * @param {*} value 值
 */
function setLocalStorageWithTime(key, value) {
  let storage = window.localStorage;
  if (storage) {
    let tmp = {
      value: value,
      time: new Date().getTime()
    };
    storage.setItem(key, JSON.stringify(tmp));
  }
}
/**
 * 读取缓存
 * 
 * 注意：只有使用 setWithTime 设置的缓存才可以带上过期时间，否则可能发生异常或返回错误数据
 * 
 * @param {*} key 键
 * @param {*} expSeconds 可选：过期时间（秒），使用setWithTime设置的缓存才可以使用此参数
 */
function get(key, expSeconds) {
  let storage = window.sessionStorage;
  let val = storage.getItem(key);
  if (storage && val) {
    if (!expSeconds) {
      return val;
    }
    let cache = JSON.parse(val);
    let now = new Date().getTime();
    if (now - cache.time < expSeconds * 1000) {
      return cache.value;
    }
  }
}

/**
 * 读取 localStorage 缓存
 * 
 * 注意：只有使用 setLocalStorageWithTime 设置的缓存才可以带上过期时间，否则可能发生异常或返回错误数据
 * 
 * @param {*} key 键
 * @param {*} expSeconds 可选：过期时间（秒），使用 setLocalStorageWithTime 设置的缓存才可以使用此参数
 */
function getFromLocalStorage(key, expSeconds) {
  let storage = window.localStorage;
  let val = storage.getItem(key);
  if (storage && val) {
    if (!expSeconds) {
      return val;
    }
    let cache = JSON.parse(val);
    let now = new Date().getTime();
    if (now - cache.time < expSeconds * 1000) {
      return cache.value;
    }
  }
}
/**
 * 删除缓存
 * @param {*} key 键
 */
function del(key) {
  let storage = window.sessionStorage;
  if (storage && storage.getItem(key)) {
    storage.removeItem(key);
  }
}

/**
 * 删除 localStorage 缓存
 * @param {*} key 键
 */
function delLocalStorage(key) {
  let storage = window.localStorage;
  if (storage && storage.getItem(key)) {
    storage.removeItem(key);
  }
}
/**
 * 清除所有缓存
 */
function clear() {
  let localStorage = window.localStorage;
  if (localStorage) {
    localStorage.clear();
  }
  let sessionStorage = window.sessionStorage;
  if (sessionStorage) {
    sessionStorage.clear();
  }
}
/**
 * 缓存读写工具
 * 默认使用 sessionStorage, 同时提供 localStorage 的方法
 */
export default {
  set,
  setLocalStorage,
  setWithTime,
  setLocalStorageWithTime,
  get,
  getFromLocalStorage,
  del,
  delLocalStorage,
  clear
};

Cookie 工具

//写cookies
function setCookie(name, value, expireSecond) {
  let exp = new Date();
  // 设置一个默认的过期时间
  if(expireSecond && expireSecond > 0){
  	exp.setTime(exp.getTime() + expireSecond * 1000);
  }
  document.cookie = name + "=" + escape(value) + "; path=/; expires=" + exp.toGMTString();
}

function getCookie(name) {
  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  if (arr === document.cookie.match(reg))
    return unescape(arr[2]);
  else
    return null;
}

export default {
  setCookie,
  getCookie
}

正则校验工具

const SPE_REG_EN = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;
const SPE_REG_CN = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
const PHONE_REG = /(^[0-9]{3,4}\-[0-9]{3,8}$)|(^1[3-9][0-9]\d{8}$)/;
const NUMBER_REG = /^[0-9]+$/;
/**
 * 是否包含特殊字符
 * @param {*} str 需要检测的字符串
 */
function hasSpecialSymbol(str) {
  return hasEnSpecialSymbol(str) || hasCnSpecialSymbol(str);
};

/**
 * 是否包含英文特殊字符
 * @param {*} str 需要检测的字符串
 */
function hasEnSpecialSymbol(str) {
  return SPE_REG_EN.test(str);
};

/**
 * 是否包含中文特殊字符
 * @param {*} str 需要检测的字符串
 */
function hasCnSpecialSymbol(str) {
  return SPE_REG_CN.test(str);
};

/**
 * 是否是电话
 * @param {*} str 需要检测的字符串
 */
function isPhone(str) {
  return str && PHONE_REG.test(str);
};

/**
 * 是否是纯数字
 */
function isNumber(str) {
  return str && NUMBER_REG.test(str);
}

export default {
  hasSpecialSymbol,
  hasEnSpecialSymbol,
  hasCnSpecialSymbol,
  isPhone,
  isNumber
};

日期格式化

/**
 * 
 * @param {*} t 日期
 * @param {*} format 格式，默认为 yyyy-MM-dd hh:mm:ss
 */
function formatDate(t, format) {
  let date = {
    "M+": t.getMonth() + 1,
    "d+": t.getDate(),
    "h+": t.getHours(),
    "m+": t.getMinutes(),
    "s+": t.getSeconds(),
    "q+": Math.floor((t.getMonth() + 3) / 3),
    "S+": t.getMilliseconds()
  };
  format = format || "yyyy-MM-dd hh:mm:ss";
  if (/(y+)/i.test(format)) {
    format = format.replace(RegExp.$1, (t.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  for (let k in date) {
    if (new RegExp("(" + k + ")").test(format)) {
      format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
    }
  }
  return format;
};

来源：CSDN

作者：dadiyang

链接：https://blog.csdn.net/dadiyang/article/details/104112322