Fetch API返回的响应无法在后续代码中复用如何解决

你原有代码存在一个隐藏语法bug：JSON.stringify入参中多写了一个多余的闭合大括号，会导致请求体序列化失败，先修正该问题，再实现URL存储、复用和跳转逻辑即可。

方案1：点击按钮时实时请求、直接跳转（推荐，避免URL过期） #

你当前接口返回的凭证有效期只有10分钟，提前存储容易过期失效，推荐用户点击按钮时再发起请求，拿到URL后直接新标签页打开，同时把URL存在全局变量供站点其他逻辑复用：

// 全局变量，存储接口返回的URL，站点内所有JS逻辑都可以直接调用该变量取值
let idvRedirectUrl = '';

function initiateIDV(){
  const myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/json");
  myHeaders.append("Authorization", "Basic xxxxxxxxxxxxx");
  
  // 修正原有JSON.stringify的语法错误，移除多余的闭合大括号
  const raw = JSON.stringify({
    "customerInternalReference": "Will's App",
    "userReference": "test-app",
    "tokenLifetime": "10m"
  });
  
  const requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow'
  };

  return fetch("https://[hidden]/api/v1/accounts", requestOptions)
    .then(response => response.json())
    .then(result => {
      // 将返回的URL存入全局变量
      idvRedirectUrl = result.web.href;
      console.log('获取到的跳转地址：', idvRedirectUrl);
      // 新标签页打开目标URL
      window.open(idvRedirectUrl, '_blank');
      return idvRedirectUrl;
    })
    .catch(error => {
      console.log('请求出错：', error);
      // 可在此处添加用户侧错误提示，比如弹窗告知获取跳转地址失败
    });   
}

页面对应按钮直接绑定点击事件即可：

<button onclick="initiateIDV()">开始身份验证</button>

方案2：页面加载时预请求存储URL，点击直接跳转 #

如果你的业务场景需要页面加载完成就提前拿到URL，减少用户点击后的等待时间，可以用预加载方案，注意判断URL是否加载完成、以及过期后重新请求：

// 全局变量，存储预请求拿到的URL
let idvRedirectUrl = '';

// 页面加载完成后自动发起请求拿URL
window.addEventListener('DOMContentLoaded', () => {
  const myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/json");
  myHeaders.append("Authorization", "Basic xxxxxxxxxxxxx");
  
  const raw = JSON.stringify({
    "customerInternalReference": "Will's App",
    "userReference": "test-app",
    "tokenLifetime": "10m"
  });
  
  const requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow'
  };

  fetch("https://[hidden]/api/v1/accounts", requestOptions)
    .then(response => response.json())
    .then(result => {
      idvRedirectUrl = result.web.href;
      console.log('预加载跳转地址完成：', idvRedirectUrl);
    })
    .catch(error => console.log('预加载地址出错：', error));
});

// 按钮点击时直接读取已存储的URL跳转
function handleButtonClick() {
  if (!idvRedirectUrl) {
    alert('跳转地址还在加载中，请稍后再试');
    return;
  }
  window.open(idvRedirectUrl, '_blank');
}

对应按钮代码：

<button onclick="handleButtonClick()">开始身份验证</button>

注意事项：

• 不要把Authorization认证信息硬编码在前端静态代码中，所有用户都可以通过浏览器查看源码拿到你的认证凭证，存在接口被盗刷的风险，建议增加一层后端服务代理该接口请求。
• 如果出现弹窗被浏览器拦截的情况，是因为跳转逻辑不在用户点击事件的直接回调链路中，用方案1在点击事件回调内发起请求后跳转即可避免该问题。

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