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

Question

我有这个函数可以向 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);
            });
          }}

控制台显示a

promise<object>

不是实际数据， 但是当我将 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

添加提取密钥，但这个日志记录问题真的很烦我

Answer 1

第一种方式：

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

当您从异步函数返回 Promise 时，

get().then(...

像平常一样解析 Promise，因此您将获得预期的正确数据。

如果你想采用第一种方式，请先

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