javascript - Typescript - 在函数返回 block 中使用 then 的值

Question

我有这个功能:

function configureClient(): ApolloClient<ApolloCache<any>> {
    let myToken = getOktaToken().then(token => {
        return token
    });

    return new ApolloClient<InMemoryCache>({
        uri: "someUrl",
        cache: new InMemoryCache(),
        headers: {
            someAuth: myToken
        }
    });
}

我要someAuth: myToken在headers要设置的返回 block ，但不确定如何使用此 then block 。

还要添加:

一般来说，我会这样做，let myToken = await getOktaToken() - 但是我无法创建 async function configureClient()那样ApolloClient<ApolloCache<any>>提示一些 ES3。我想这会起作用吗？ Type 'typeof DefaultClient' in not a valid async function return type in ES5/ES3 because it does not refer to a Promise compatible constructor value

Answer 1

Promise 是异步的——您传递给 then 的回调会在函数返回后进行计算。您可以使整个 configureClient 函数返回一个 Promise，但这意味着您必须更改在应用程序中其他地方使用它的方式(同样，因为到那时，整个客户端将被异步初始化)。

function configureClient(): Promise<ApolloClient<ApolloCache<any>>> {
  return getOktaToken().then(token => {
    return new ApolloClient<InMemoryCache>({
      uri: "someUrl",
      cache: new InMemoryCache(),
      headers: {
        someAuth: token
      }
    });
  });
}

// or the equivalent using async/await syntax

async function configureClient(): Promise<ApolloClient<ApolloCache<any>>> {
  const token = await getOktaToken()
  return new ApolloClient<InMemoryCache>({
    uri: "someUrl",
    cache: new InMemoryCache(),
    headers: {
      someAuth: token
    }
  });
}

您可以延迟渲染应用程序，直到获取客户端为止。例如:

const App = () => {
  const [client, setClient] = useState(null)
  useEffect(() => {
    configureClient().then(setClient)
  }, [])

  if (!client) {
    return null
  }

  return (
    <ApolloProvider client={client}>
      ...
    </ApolloProvider>
  )
}

如果您有需要异步获取的 header ，首选方法是使用 apollo-link-context。你应该stop using Apollo Boost或更好 migrate to the latest Apollo Client 。然后，您可以为客户端实例配置链接并添加上下文链接，如下所示 here .