封装axios

原创已于 2022-06-29 18:05:12 修改 · 234 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#前端 #javascript #开发语言
于 2022-06-29 17:48:39 首次发布
Vue 同时被 2 个专栏收录
8 篇文章
订阅专栏
工具类
5 篇文章
订阅专栏
这段代码展示了如何使用axios创建一个HTTP服务实例，并配置了请求和响应拦截器来处理token验证、超时、错误提示等问题。同时，提供了方便的方法如asyncGet、asyncPost等用于发起HTTP请求，以及文件下载和读取本地文件的功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
import axios from 'axios';
import qs from 'qs';
import vMessage from '@/components/messageTips';

const service = axios.create({
  // 请求超时时间
  // timeout: 3000
});
// service.defaults.withCredentials = true;

// 请求拦截器
service.interceptors.request.use(
  async config => {
    if (config.url.indexOf('login') > 0) { // 部分接口不需要验证token，如登录
      // 下面5个数据  都是登陆后就放入localStorage的
      let tenantToken = localStorage.getItem('tenant_token'); // token
      const tenantId = localStorage.getItem('tenantId'); // 业务所需
      const userId = localStorage.getItem('userId'); // 业务所需
      const expTime = localStorage.getItem('exp_time'); // token失效时间点（ms）
      const refreshTime = localStorage.getItem('refresh_time'); // 时间长度（ms）
      if (expTime !== 'permanent') {
        // 校验token有效期
        let nowTime = '';
        const [err, res] = await to(axios.head(`${window.projectConfig.asiaInfoUrl}/tenant/time`));
        if (!err && res) {
          nowTime = new Date(res.headers.date).getTime();
          // 若token有效期到今日10点，refreshTime=5分钟，若用户在9:55-10:00之间仍然在调用接口，则重新获取新的token，并保存新token的信息，下次请求中携带新token，可避免用户操作过程中，突然返回登录页的尴尬
          // 当前时间>失效时间-token刷新时间，获取新token，失效时间重新开始计算，此过程用户无感知
          if (nowTime > expTime - refreshTime && nowTime < expTime) {
            const [err2, res2] = await asyncPost('tenant/t_refresh_token', qs.stringify({
              tenant_id: tenantId,
              user_id: userId,
              token: tenantToken
            }));
            if (!err2 && res2) {
              tenantToken = res2.data.result.tenant_refreshToken;
              localStorage.setItem('tenant_token', tenantToken);
              localStorage.setItem('exp_time', res2.data.result.exp_time);
            }
          }
        }
      } else {
        // 当expTime==='permanent' 不需要校验token有效期
      }
      config.headers.tenant_token = tenantToken;
    }
    return config;
  },
  err => {
    console.log(err);
  }
);

service.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return response;
    } else {
      // router.replace('/403');
    }
  },
  err => {
    // console.log(err.request);
    if (err.request.status === 510) {
      vMessage.error('token校验异常，请重新登录');
      localStorage.clear();
      // 退出登录时，需要将vuex中的变量全部还原为初始化值，如果用$router跳转无法还原
      window.location = 'login';
      // return Promise.resolve(err.response);
      // return err.response;
    } else {
      return Promise.reject(err);
    }
  }
);

const formatUrl = url => {
  let returnUrl = '';
  if (url.startsWith('http://') || url.startsWith('https://')) {
    returnUrl = url;
  } else {
    // 传递的url不能以 '/' 开头，否则拼接后的url会存在双斜杠，可能会导致服务器报错
    if (url.startsWith('/')) {
      console.error(`url=${url}，此url错误，请勿以'/'开头，`);
      returnUrl = 'error';
    } else {
      returnUrl = `${window.projectConfig.asiaInfoUrl}/${url}`;
    }
  }
  return returnUrl;
};

// 此方法是为了方便使用axios.all
const getPromise = (url, params, config) => {
  const newUrl = formatUrl(url);
  if (newUrl === 'error') {
    return;
  }
  const obj = Object.assign({
    url: newUrl,
    method: 'get',
    params
  }, config);
  return service(obj);
};

const asyncGet = (url, params, config, errorExt) => {
  const promise = getPromise(url, params, config);
  return to(promise, errorExt);
};

// 此方法是为了方便使用axios.all
const downloadPromise = (url, params, config) => {
  const newUrl = formatUrl(url);
  if (newUrl === 'error') {
    return;
  }
  const obj = Object.assign({
    url: newUrl,
    method: 'get',
    params,
    responseType: 'arraybuffer'
  }, config);
  return service(obj);
};

const asyncDownload = (url, params, config, errorExt) => {
  const promise = downloadPromise(url, params, config);
  return to(promise, errorExt);
};

// 此方法是为了方便使用axios.all
const postPromise = (url, data, config) => {
  const newUrl = formatUrl(url);
  if (newUrl === 'error') {
    return;
  }
  const obj = Object.assign({
    url: newUrl,
    method: 'post',
    data
  }, config);
  return service(obj);
};

const asyncPost = (url, data, config, errorExt) => {
  const promise = postPromise(url, data, config);
  return to(promise, errorExt);
};

// 此方法是为了方便使用axios.all
const putPromise = (url, data, config) => {
  const newUrl = formatUrl(url);
  if (newUrl === 'error') {
    return;
  }
  const obj = Object.assign({
    url: newUrl,
    method: 'put',
    data
  }, config);
  return service(obj);
};

const asyncPut = (url, data, config, errorExt) => {
  const promise = putPromise(url, data, config);
  return to(promise, errorExt);
};

// 此方法是为了方便使用axios.all
const deletePromise = (url, params, config) => {
  const newUrl = formatUrl(url);
  if (newUrl === 'error') {
    return;
  }
  const obj = Object.assign({
    url: newUrl,
    method: 'delete',
    params
  }, config);
  return service(obj);
};

const asyncDelete = (url, params, config, errorExt) => {
  const promise = deletePromise(url, params, config);
  return to(promise, errorExt);
};

// 读取本地文件
const readLocalFile = (url, params, config, errorExt) => {
  const obj = Object.assign({
    url: url,
    method: 'get',
    params
  }, config);
  return to(service(obj), errorExt);
};

const to = (promise, errorExt = '未知错误') => {
  return promise
    .then(function (data) {
      return [null, data];
    })
    .catch(function (err) {
      if (errorExt) {
        Object.assign(err, { errorExt });
      }
      if (err.code === 'ECONNABORTED' && err.message.indexOf('timeout') !== -1) {
        vMessage.error(`请求超时 [ 错误编码：${err.request.status} ]`);
      } else if (err.message.indexOf('Network Error') !== -1) {
        vMessage.error(`网络异常 [ 错误编码：${err.request.status} ]`);
      } else if (err.request.status === 403) {
        vMessage.error(`无访问权限 [ 错误编码：${err.request.status} ]`);
      } else if (err.request.status === 404) {
        vMessage.error(`请求资源不存在 [ 错误编码：${err.request.status} ]`);
      } else if (err.request.status === 460) {
        vMessage.error(`token错误 [ 错误编码：${err.request.status} ]`);
      } else {
        if (err.request.status !== undefined) {
          vMessage.error(`系统繁忙，请稍后再试 [ 错误编码：${err.request.status} ]`);
        } else {
          vMessage.error('系统繁忙，请稍后再试');
        }
      }
      return [err, undefined];
    });
};

const handleStream = function (res, fileName) {
  const blob = new Blob([res], { type: 'application/octet-stream' });
  if (typeof window.navigator.msSaveBlob !== 'undefined') {
    window.navigator.msSaveBlob(blob, fileName);
  } else {
    const URL = window.URL || window.webkitURL;
    const objectUrl = URL.createObjectURL(blob);
    const a = document.createElement('a');
    // safari doesn't support this yet
    if (typeof a.download === 'undefined') {
      window.location = objectUrl;
    } else {
      a.href = objectUrl;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
      a.remove();
    }
  }
};

const exportObj = {
  service,
  to,
  getPromise,
  postPromise,
  putPromise,
  deletePromise,
  asyncGet,
  asyncPost,
  asyncPut,
  asyncDelete,
  asyncDownload,
  handleStream,
  readLocalFile
};

export default exportObj;