axios-utils-zhy

npm i axios-utils-zhy

示例

<script setup lang="ts">
import { ref } from "vue";
import { createTypedHttpClient } from "axios-utils-zhy";

// 创建实例
const http = createTypedHttpClient({
  baseURL: "/api",
  interceptors: {
    request: (config) => {
      config.headers["Token"] = "xxx";
      return config;
    },
  },
});

// 示例接口返回数据
interface User {
  id: number;
  name: string;
}

// 请求数据
const user = ref<User>();
const load = async () => {
  user.value = await http.get<User>("/users/1");
};

load();
</script>

<template>
  <div>
    <p v-if="user">Hello, {{ user.name }}</p>
  </div>
</template>

属性

| 参数名 | 类型 | 必填 | 默认值 | 说明 | | ------------ | ---------------------- | -- | ----- | ---------- | | baseURL | string | 否 | '' | 接口统一前缀 | | timeout | number | 否 | 10000 | 请求超时时间(ms) | | interceptors | object | 否 | - | 拦截器配置，见下方 | | headers | Record<string,string> | 否 | {} | 公共请求头 |

interceptors 属性

| 参数名 | 类型 | 必填 | 默认值 | 说明 | | -------- | ------------------------------------------ | -- | --- | -------- | | request | (config: InternalAxiosRequestConfig) => … | 否 | - | 请求拦截器 | | response | (res: AxiosResponse) => AxiosResponse | … | 否 | - | 响应成功拦截器 | | error | (error: any) => any | 否 | - | 响应错误统一处理 |

快捷方法一览

| 方法名 | 调用示例 | 返回类型 | | ------ | --------------------------------- | --------------- | | get | await http.get<User>('/user/1') | Promise<User> | | post | await http.post('/user', data) | Promise<any> | | put | await http.put('/user/1', data) | Promise<any> | | delete | await http.delete('/user/1') | Promise<any> |