vue3项目中axios的封装虽说在理解了axios后封装一下并不是一件难事，但是我作为一个工作经验不满半年的小白来说，

虽说在理解了axios后封装一下并不是一件难事，但是我作为一个工作经验不满半年的小白来说，初见axios的封装是还是一脸懵逼的研究了很久，所以写这篇文章的目的写是想充当一个笔记用的，当然理解还是不足的，希望看到这篇文章的大家，能够给点建议哈。目前就以我手中项目为例了

首先需要创建一个axios实例

const Storage = createStorage({ storage: localStorage });
const bsinRequest = axios.create({//创建axios实例
  timeout: 3000 //设置请求超时时间
})

下面是request，请求拦截在我自己看来就是在请求发出是将项目中需要的重复参数封装近请求中，这样也能避免每次请求都需要写多个相同的参数，节省了代码的同时，代码更加清晰，复用性也有了很大提升。

//这里bsinRequest的名字当然是可以随便取的
bsinRequest.interceptors.request.use(config => {
  config.headers.token = token// token

  //判断是否为登录请求并且判断请求是否携带token 
  //大部分后台管理系统中都需要设置一个token来进行身份验证没有这个验证的当然也就请求不到数据
  //这边的逻辑是登录成功之后返回身份认证的token
  //所以就做出了login请求不需要token的判断
  

  if (config.data.sysHead.stdIntfcInd !== "login") {
    if (!token) {
        message.info('权限未获取请重新登陆')
        router.replace('/login');
    }
  }

  // 系统报文
  const sysHead = {
    //这里可以存放请求时后端要求传过去的参数哦
    ...config.data.sysHead
  }

// 开启序列化固定求情方式为post请求，这边可以根据自己的实际情况进行修改
  if (config.params) {
    Object.assign(config.params, { orgId: token })
  }
  if (config.method === 'post' && config.headers.serialize) {
    delete config.data.serialize
  }

  // 组装请求体
  const data = {
    sysHead,
    localHead,
    body: {
      ...config?.data?.body,//将请求的参数封装近请求体中
    },
  }

  // http
  const array = {
    ...config,
    data
  }

  return {
    ...array
  }

});

下面是response，响应拦截就是将请求之后返回的信息在这边获取到错误之后进行处理后抛出错误

// 响应拦截
bsinRequest.interceptors.response.use(
  res => {
    if (res.data.sysHead.retCd === "NDAMMC-B-100018") {
      localStorage.clear()
      router.push('/login')
    // token失效后清除调数据并跳转登录页
    }
    if (res.data.sysHead.retCd === "000000") {// 请求成功
      return res
    }else{
    return Promise.reject(error) //请求失败抛出异常
    }
  }
)
// 将自己封装的axios抛出后就能在页面使用了
export default bsinRequest;

看到看到这了难道没有人好奇bsin是个什么呢 Bsin-PaaS（毕昇）是一套企业级的低代码、零代码去中心化应用搭建平台，可帮助企业快速搭建有竞争力的业务中台、流程中台、业务前台。bsin-paas包括微前端设计、微服务框架、服务编排、工作流引擎、安全网关及区块链引擎。该方案由区块链(公链、联盟链)作为技术支撑,为企业提供daPaaS层的一站式解决方案，助力企业打造数字经济底层技术架构，构建一套开放式和生态化的技术体系。作为一个平台，Bsin-PaaS本身拥有自己的数字货币资产，以用户为中心，实现让价值掌握在拥有者手中。这里是地址哈感兴趣的可以去看看哈 gitee.com/bsin-paas/a…