Question

尝试使用以下响应界面处理服务器发回的数据。唯一的问题是response.data.data显然为空白。但是，response.data包含实际数据。

当我将鼠标悬停在response.data.data的最后一个数据上时，它显示的类型为：（属性）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);
  }
}

Answer 1

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

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

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

因此，传递的第一个类型（T）是数据的类型，而不是响应的类型。对于您的情况，您必须通过以下方式实现：

this.productAxios.get<Product, ProductResponse>

您的数据确实在response.data中：）

从axios获取请求返回数据

1 个答案: