Vue 3和TypeScript的axios请求封装示例

最新推荐文章于 2024-09-10 11:03:11 发布

qq_33440740

最新推荐文章于 2024-09-10 11:03:11 发布

阅读量265

点赞数

文章标签： vue.js typescript javascript

本文链接：https://blog.csdn.net/qq_33440740/article/details/129687224

版权

该代码示例展示了如何在Vue3项目中使用axios库创建一个带有默认配置的实例，设置请求和响应拦截器，以及如何封装一个泛型请求方法。同时，利用Vue3的reactive创建了一个响应式对象来管理请求的loading状态。

摘要由CSDN通过智能技术生成

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
import { reactive } from "vue";

// 定义请求响应数据结构
interface ResponseData<T> {
  code: number;
  data: T;
  message: string;
}

// 定义默认请求配置
const defaultConfig: AxiosRequestConfig = {
  baseURL: "https://api.example.com",
  timeout: 10000,
};

// 创建axios实例
const instance: AxiosInstance = axios.create(defaultConfig);

// 请求拦截器
instance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在发送请求前做些什么
    // 可以在这里设置请求头等信息
    return config;
  },
  (error: any) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response: AxiosResponse<ResponseData<any>>) => {
    // 对响应数据做些什么
    // 在这里判断响应状态码，抛出错误等
    return response.data;
  },
  (error: any) => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

// 封装请求方法
export function request<T>(config: AxiosRequestConfig): Promise<ResponseData<T>> {
  return instance
    .request<ResponseData<T>>(config)
    .then((response: AxiosResponse<ResponseData<T>>) => {
      return response.data;
    })
    .catch((error: any) => {
      return Promise.reject(error);
    });
}

// 使用响应式对象保存loading状态
export const loading = reactive({ status: false });

// 导出request和loading对象
export default { request, loading };

在这个示例中，我们使用了axios创建了一个默认配置的实例，并通过拦截器实现了请求和响应的处理逻辑。在请求拦截器中，我们可以设置请求头等信息；在响应拦截器中，我们可以对响应数据进行判断和处理。在请求方法request中，我们使用了泛型来指定响应数据类型，并使用了Vue 3的响应式对象reactive来保存loading状态。

可以将上述代码保存为一个单独的文件，并在Vue项目中通过import导入，然后使用request函数来发起请求。例如：

import api from "@/api";

api.loading.status = true;

api
  .request<UserInfo>({
    url: "/user",
    method: "get",
    params: {
      id: 1,
    },
  })
  .then((data: ResponseData<UserInfo>) => {
    console.log(data);
  })
  .catch((error: any) => {
    console.error(error);
  })
  .finally(() => {
    api.loading.status = false;
  });