自学前端第一天 : 简单二次封装axios

对axios进行简单的二次封装处理
export const req = (method, url, data, type = 'application/json', params = "") => {
  let config = {
    method: method,
    url: url,
    headers: {
      'Content-Type': type,
      'Authorization': localStorage.getItem('Authorization')
    },
    params: params
  };

  // 如果Content-Type是application/json,则直接发送JSON格式的数据
  if (type === 'application/json') {
    config.data = JSON.stringify(data);
  } else {
    // 如果不是application/json,使用transformRequest进行转换
    config.data = data;
    config.transformRequest = [
      function (data) {
        let ret = '';
        for (let it in data) {
          if (data.hasOwnProperty(it)) {
            if (Array.isArray(data[it])) {
              data[it].forEach(item => {
                ret += `${encodeURIComponent(it)}[]=${encodeURIComponent(item)}&`;
              });
            } else {
              ret += `${encodeURIComponent(it)}=${encodeURIComponent(data[it])}&`;
            }
          }
        }
        return ret;
      }
    ];
  }

  return axios(config).then(res => res.data);
};
引入二次封装的axios
import {req} from "@/utils/http"

export const selectDictTypeList = (params) => { return req('get','/api/admin/dictType/index',"","",params) }
最后就是在vue页面中使用了
<template>
  <div>home</div>
</template>

<script setup>
import {selectDictTypeList } from "@/api/index"
selectDictTypeList().then(res => {
  console.log(res,"字典测试")
})
</script>

<style>
</style>
该封装只是极为简单的初步封装 后续需结合自己的项目情况进行自定义封装
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值