如何正确返回Token并规避竞态条件？解决Fetch获取Token失效问题

原可行实现 #

API返回的数据格式：

{"data":{"type":"token","attributes":{"token":"12345678908"}}}

该接口可正常返回Token，对应的Zendesk Messenger登录调用代码：

zE('messenger', 'loginUser', function (callback: any) {
    const token = query.data?.attributes?.token
    callback(token)
})

当前问题 #

收到反馈称上述实现存在潜在竞态条件，必须确认Token完全加载后再执行登录操作。为此尝试了异步Fetch方案，但response.json()未返回预期的Token数据：

问题代码 #

async function fetchZendeskToken() {
  const JWT_TOKEN_ENDPOINT = `${query.data?.attributes?.token}`

  const response = await fetch( JWT_TOKEN_ENDPOINT, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/vnd.api+json',
    },
  })
  
  console.log('response', response)

  if (!response.ok) {
    throw new Error(`Error fetching zendesk token`)
  }

  const data = await response.json()
  console.log('response', data)
}

控制台输出的响应信息 #

Response {type: 'basic', url: 'http://localhost:8080/1234567890', redirected: false, status: 200, ok: true, …}

另外，以下调整后的Zendesk登录调用方式已失效：

zE('messenger', 'loginUser', function (callback: any) {
    callback(fetchZendeskToken());
})

需求 #

需要解决以下问题：

• 修复当前Fetch方案，确保能正确获取并返回Token
• 实现防竞态条件逻辑，避免用户在Token加载完成前触发登录操作

内容的提问来源于stack exchange，提问作者Pianoc