React app fetch() 响应为空，尽管从其他地方发送 GET 请求时 API 端点 returns 数据

Question

我的 API 电话是这样的：

export async function getTasks(): Promise<Task[]> {
  if (process.env.NODE_ENV === "test") {
    return new Promise<Task[]>((resolve) =>
      setTimeout(() => resolve(DefaultTasksArray), 1500)
    );
  } else {
    return (await fetch("/api/tasks").then(
      (response) => response.json
    )) as unknown as Task[];
  }
}

控制器中的 GET 动作 API

[HttpGet]
async public Task<IActionResult> Get()
{
    var tasks = await _service.GetAsync();

    return Ok(tasks);
}

服务在API

private readonly IMongoCollection<TaskObject> _tasksCollection;

public TaskService(IOptions<TaskManagerDbSettings> taskManagerDbSettings)
{
    var mongoClient = new MongoClient(taskManagerDbSettings.Value.ConnectionString);
    var mongoDatabase = mongoClient.GetDatabase(taskManagerDbSettings.Value.DatabaseName);
    _tasksCollection = mongoDatabase.GetCollection<TaskObject>(taskManagerDbSettings.Value.TasksCollectionName);
}

async public Task<List<TaskObject>> GetAsync() =>
    await _tasksCollection.Find(_ => true).ToListAsync();

当我在 Postman 或浏览器中发送 GET 请求时，我得到一个 JSON 对象，例如：

[
  {
    *data*
  },
  {
    *data*
  },
  ...
]

但是 fetch() returns 是一个空响应。可能是什么原因？打开应用程序时，我在浏览器中没有看到任何错误。

更新：我在浏览器的网络选项卡中看到响应，它有代码 200 和所有数据。但是在应用程序本身中，响应是空的。

Answer 1

获取 API 的响应中的 json 属性是您要调用的函数。

(response) => response.json

应该是

(response) => response.json()

Answer 2

原来是API输出模型和UI响应模型的细微差别造成的。在我更改之后，它按预期工作。

另外我不应该使用“未知任务[]” 是的，response.json()

React app fetch() 响应为空，尽管从其他地方发送 GET 请求时 API 端点 returns 数据

React app fetch() response is empty although API endpoint returns data when sending a GET request from somewhere else

reactjs

json

typescript

asp.net-web-api

fetch-api