axios

相对于原生axios解决问题：

1. 加入节流自动过滤多余的重复请求，节省带宽同时，一定程度防止表单短时间重复提交的问题
2. vue页面销毁自动取消未完成的请求，节省页面资源
3. 在有必要的情况下，可手动终止当前请求
4. 响应式用法
5. 响应默认值设置
6. 增加path传参模式

安装

pnpm

pnpm add @howuse/axios axios

npm

npm i @howuse/axios axios

yarn

yarn add @howuse/axios axios

实例创建-请求拦截器、响应拦截器

在初始化创建，保留原有的 AxiosInstance 结构。如果有必要，也可以使用默认的 server

<script setup lang="ts">

import { createAxios } from "@howuse/axios";

const { useAxiosRequest, useBlobDownload, server } = createAxios({
  baseURL: "/",
  timeout: 0
});

// 请求拦截器
server.interceptors.request.use(
  config => {
    const token = sessionStorage.getItem("USER_TOKEN")
    if (!token) {
      console.warn("token获取失败...")
    }
    if (config.headers) {
      config.headers.Authorization = `Bearer ${token || process.env.VUE_APP_TOKEN}`
    }
  });

// 响应拦截器 适合做一些不影响数据结构的操作，例如token失效返回登录页面等
server.interceptors.response.use(
  (response) => {
    // return response.data
    // 网上许多示例将此处直接设置为 response.data ，一定程度上影响未来响应头的获取，一旦需要使用响应头时，变得异常困难
    // 正确的方式应该是将响应的server二次封装
    return response
  },
  (error) => {
    console.log(error);
  }
)
</script>

请求

带防抖的请求，通过isDebounce设置实际上内部默认开启防抖，通过defaultVal可设置返回默认值

<template>
  <el-button type="primary" @click="request()">请求接口</el-button>
  <p>请求结果：{{ data }}</p>
</template>
<script lang="ts" setup>
import { ElMessage, ElButton } from "element-plus";
import { createAxios } from "@howuse/axios";
import { watch } from "vue";

const { useAxiosRequest } = createAxios({
  baseURL: "//www.httpbin.org",
});

const { data, response, loading, finished, execute, edata } = useAxiosRequest<any>(
  {
    url: "/anything",
    method: "post",
  },
  {
    defaultVal: {}, // 设置默认响应值，默认是 []
    isDebounce: true
  }
);

// 响应式用法
watch(finished, (finished) => finished && ElMessage.info("响应式调用完成"))


// 一般请求用法
function request() {
  execute().then((data) => {
    ElMessage.info(`一般调用完成`);
  });
  execute().then((data) => {
    ElMessage.info(`一般调用完成`);
  });
  execute().then((data) => {
    ElMessage.info(`一般调用完成`);
  });
}
</script>

blob文件下载

后端经常返回流文件供前端下载，本方法封装自动读取文件名（响应头允许的话，否则自行设置）、自动读取文件类型，方便正确文件格式转换

<template>
  <el-button type="primary" @click="downloadPng()">下载</el-button>
</template>
<script lang="ts" setup>
import { createAxios } from "@howuse/axios";
import { ElButton } from "element-plus";

const { useBlobDownload } = createAxios({
  baseURL: "//www.httpbin.org",
});

const { execute: downloadPng } = useBlobDownload(
  {
    url: "/image/png",
  },
  {
    fileName: "图片.png",
  }
);
</script>
<style lang="less" scoped></style>