返回axios get请求的数据

Question

尝试使用以下响应接口处理服务器返回的数据。唯一的问题是response.data.data明显为空，但response.data包含了实际数据。

当我悬停在response.data.data中的最后一个数据上时，它显示类型为:(Property) ProductResponse.data: ProductDTO。

如果我修改我的axios.get<>（）以将response.data传递给Product构造函数并返回一个Product，则一切都可以正常工作。但我不断遇到使用此接口模式，所以我正在尝试自己使用它。

对于专家来说可能很简单，谢谢！

import axios from "axios";
import Product, { ProductDTO } from "@/models/Product";

interface ProductResponse {
  status: number;
  message: string;
  data: ProductDTO;
}

// Rework to a more generic API
export abstract class ProductApi {
  private static productAxios = axios.create();

  static async getProduct(id: number): Promise<Product> {
    let response = await this.productAxios.get<ProductResponse>(
      "http://localhost:8080/api/product/" + id
    );
    console.log(response.data.data);
    return new Product(response.data.data);
  }
}

- Ryan W

---

你的问题可能出在API端，检查一下/api/product/返回数据的方式。 - Nicolas

它返回了我期望的结果。如果我切换到只返回 <Product> 并使用 response.data，一切都按预期工作。看起来 response.data.data 因某种原因未定义。 - Ryan W

Answer 1

如果您检查Axios get()函数的类型，您会发现它具有以下实现：

  get<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>;

第一个传递的类型 (T) 是数据的类型，而不是响应的类型。在您的情况下，您将必须这样实现它：

https://github.com/axios/axios/blob/master/index.d.ts#L137

this.productAxios.get<Product, ProductResponse>

你的数据确实在response.data中 :)

- nicolasrigaudiere