控制台日志记录在函数返回对象时打印承诺，但在它不是对象时打印数据

neskvpey 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(220)

我有一个函数，它向api发出get请求

const get = async (endpoint: string): Promise<object> => {
    const response: Response = await fetch(`${process.env.PROXY}/${endpoint}`, {
      method: "GET",
    });
    return {data: response.json() as object};
};

当我在按钮onclick处理程序上使用此函数时

onClick={() => {
            get(
              `apiroute`
            ).then((data: object) => {
              console.log("Retuned data", data.data);
            });
          }}

控制台显示的是承诺，而不是实际数据
但是当我将get函数切换到

const get = async (endpoint: string): Promise<object> => {
    const response: Response = await fetch(`${process.env.PROXY}/${endpoint}`, {
      method: "GET",
    });
    return response.json() as object
};

如果不返回数据周围的对象，则通过

onClick={() => {
            get(
              `apiroute`
            ).then((data: object) => {
              console.log("Retuned data", data);
            });
          }}

控制台打印出实际数据。为什么会发生这种情况？我更喜欢用第一种方法，为它添加一个提取键 error 但是这个日志问题真的让我很恼火

Api JavaScript Fetch Asynchronous typescript

来源：https://stackoverflow.com/questions/68316298/console-logging-prints-a-promise-when-function-returns-an-object-but-prints-the

1条答案

按热度按时间

8xiog9wr1#

首先：

const get = async (endpoint: string): Promise<object> => {
    const response: Response = await fetch(`${process.env.PROXY}/${endpoint}`, {
      method: "GET",
    });
    return {data: response.json() as object};
};

记住 response.json() 它本身就是一种承诺。
你是说 return {data: <Promise>} .
第二种方法之所以有效，是因为您直接在异步函数中返回承诺，

const get = async (endpoint: string): Promise<object> => {
    const response: Response = await fetch(`${process.env.PROXY}/${endpoint}`, {
      method: "GET",
    });
    return response.json();
};

当您从异步函数返回承诺时， get().then(... 像正常情况一样解决承诺，因此您可以获得预期的正确数据。
如果你想走第一条路， await 它首先：

const get = async (endpoint: string): Promise<object> => {
    const response: Response = await fetch(`${process.env.PROXY}/${endpoint}`, {
      method: "GET",
    });
    const data = await response.json();
    return {data: data};
};

赞(0）回复(0）举报 2021-09-23

我来回答

控制台日志记录在函数返回对象时打印承诺，但在它不是对象时打印数据

1条答案

相关问题

热门标签

最新问答