从 axios 获取请求返回数据答案

【问题标题】：Return data from an axios get request从 axios 获取请求返回数据
【发布时间】：2020-03-25 05:33:07
【问题描述】：

尝试对我的服务器发回的数据使用以下响应接口。唯一的问题是 response.data.data 显然是空白的。但是， response.data 包含实际数据。

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

如果我修改我的 axios.get() 以返回 Product 并将 response.data 传递给构造函数，一切正常。但是我一直在使用这个界面模式，所以我尝试自己使用它。

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

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);
  }
}

【问题讨论】：

你的问题可能出在API端，检查/api/product/返回数据的方式。
它返回我所期望的。如果我切换到只返回并使用 response.data 一切都按预期工作。似乎 response.data.data 由于某种原因最终未定义。

标签： typescript vue.js axios

【解决方案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 :)

【讨论】：