自学前端第一天 : 简单二次封装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>

该封装只是极为简单的初步封装 后续需结合自己的项目情况进行自定义封装