为什么我的静态变量在分配后未定义？答案

【问题标题】：Why my static variable is undefined after assigning it?为什么我的静态变量在分配后未定义？
【发布时间】：2020-07-29 06:25:47
【问题描述】：

我是 TypeScript 的初学者，我不明白为什么我的变量响应仍然未定义，尽管我在我的 fetch 中分配了结果。

这是我的代码：

class UserInfoRepositoryInPeopleAPI implements UserInfoRepository {
  private static response: Promise<any> | undefined = undefined;

  constructor() {}

  init = async (accessToken: string) => {
    const headers = ...

    const url = ...
    const opts = ...

    UserInfoRepositoryInPeopleAPI.response = (await fetch(url, opts)).json();

    console.log('response? ', await UserInfoRepositoryInPeopleAPI.response);
  };

  getResponse = () => {
    return UserInfoRepositoryInPeopleAPI.response;
  };
}

然后，在另一个函数中，我做了：

const userInfo = new UserInfoRepositoryInPeopleAPI();
userinfo.init(my_access_token)

此时，它正在打印response? ...my_fetch_response... 所以它不是未定义的。但是，当我接下来做的时候：

console.log('the response here will be undefined : ', (await getResponse()))

我明白了：the response here will be undefined : undefined

我做错了什么？

【问题讨论】：

如果静态字段是从实例方法填充的，我看不到使用它的意义。似乎错了。理想情况下，您要么使用静态方法来填充它，要么使用仅返回值而不填充字段的方法（静态或实例），或者使用实例方法和实例字段。
除此之外，当您说“此时，它正在打印”时，我怀疑您是否以正确的顺序运行操作。 init 是异步的，因此它可能在之后后者console.log 运行。我认为不能保证两者会以正确的顺序运行 - 我建议链接到从 init 返回的承诺，或者使用 await userinfo.init(my_access_token) 并确保代码在解决之后运行。

标签： javascript typescript static fetch

【解决方案1】：

此行缺少关键字 await。 response.json 也在返回一个承诺。

UserInfoRepositoryInPeopleAPI.response = await (await fetch(url, opts)).json();
console.log('response? ', UserInfoRepositoryInPeopleAPI.response);

另外，UserInfoRepositoryInPeopleAPI.init 是一个异步函数，它返回一个 Promise，因此您需要等待它。

const userInfo = new UserInfoRepositoryInPeopleAPI();
await userinfo.init(my_access_token);
console.log(getResponse());

UserInfoRepositoryInPeopleAPI.response 返回 undefined 因为 promise 的异步特性。由于您没有等待我上面指定的函数调用，因此在打印 UserInfoRepositoryInPeopleAPI.response 时，该值尚不可用。

【讨论】：

您将不得不修复另一行：console.log('response? ', UserInfoRepositoryInPeopleAPI.response);。这不再需要await。
包括控制台
原来在我的 init() await userinfo.init(my_access_token); 之前添加 await 关键字完全解决了我的问题，谢谢！

【解决方案2】：

您需要使您的 getResponse() 成为异步函数。

    getResponse = async () => {
        return await UserInfoRepositoryInPeopleAPI.response;
    };

您还需要这样做：

   await userinfo.init(my_access_token)

【讨论】：

谢谢你！为什么我的变量是未定义的，并且没有 async 关键字不返回承诺？
这取决于你调用它的顺序。如果您在分配之前调用它。 UserInfoRepositoryInPeopleAPI.response = (await fetch(url, opts)).json() 那么它将被取消分配。
你也应该这样做await userinfo.init(my_access_token)

【解决方案3】：

也许

等待用户信息.getResponse()

代替

等待 getResponse()

【讨论】：