Azure AI文档翻译服务：成功状态与目标Blob可用的延迟问题

方案一：前端轮询检查Blob可用性（最直接易实现） #

收到翻译状态返回"Succeeded"后，不要立刻展示链接，而是启动轮询任务定期检查目标Blob是否可访问：

• 用HEAD请求替代GET，仅校验状态码，避免下载文件内容，更高效
• 设置合理的轮询间隔（比如2秒）和最大重试次数（比如15次，对应30秒超时，覆盖大部分场景）
• 轮询成功后再渲染下载链接；超时则显示提示，允许用户手动触发重试

示例代码：

// 检查Blob是否可用的工具函数
async function checkBlobReady(blobUrl) {
  try {
    const response = await fetch(blobUrl, { method: 'HEAD' });
    return response.ok; // 状态码200-299即为可用
  } catch (err) {
    return false;
  }
}

// 轮询逻辑实现
async function waitForBlobAndShowLink(blobUrl, linkElement) {
  const maxRetries = 15;
  const retryInterval = 2000;
  let retries = 0;

  // 先显示准备状态
  linkElement.textContent = '文件准备中...';
  linkElement.style.display = 'inline';

  while (retries < maxRetries) {
    const isReady = await checkBlobReady(blobUrl);
    if (isReady) {
      linkElement.href = blobUrl;
      linkElement.textContent = '下载翻译文档';
      return;
    }
    retries++;
    await new Promise(resolve => setTimeout(resolve, retryInterval));
  }

  // 超时处理
  linkElement.textContent = '文件准备超时，请点击重试';
  linkElement.onclick = () => waitForBlobAndShowLink(blobUrl, linkElement);
}

// 收到Succeeded状态后调用
const targetBlobUrl = '提前构造的Blob URL';
const downloadLink = document.getElementById('download-link');
waitForBlobAndShowLink(targetBlobUrl, downloadLink);

方案二：利用存储服务的事件通知（更高效的无轮询方案） #

如果你的Blob存储服务支持事件触发（比如云存储的事件网格功能），可以在后端配置：当翻译后的Blob成功上传到容器时，触发一个事件，通过WebSocket/SignalR推送给前端。前端收到事件后直接展示链接，完全避免轮询延迟。

优点：实时性强，无需前端轮询消耗资源；缺点：需要后端配合配置事件通知和实时推送服务，复杂度更高。

方案三：点击链接时动态检查（折中方案） #

如果不想提前轮询，也可以直接展示链接，但在用户点击时先检查Blob可用性：

• 链接默认显示“下载翻译文档”，点击时先发起HEAD请求
• 如果Blob不可用，弹出提示“文件正在准备中，请稍等几秒再试”，阻止跳转
• 也可以自动重试2-3次，成功后再跳转

示例代码：

document.getElementById('download-link').addEventListener('click', async (e) => {
  e.preventDefault();
  const blobUrl = e.target.href;
  const maxRetries = 3;
  let retries = 0;

  while (retries < maxRetries) {
    const isReady = await checkBlobReady(blobUrl);
    if (isReady) {
      window.location.href = blobUrl;
      return;
    }
    retries++;
    await new Promise(resolve => setTimeout(resolve, 1000));
  }

  alert('文件尚未准备好，请稍后再试');
});

方案选择建议 #

• 如果没有后端开发资源，优先选方案一，实现简单且能有效避免用户遇到报错
• 如果有后端支持，优先选方案二，体验更优且节省前端资源
• 如果追求极简实现，可考虑方案三，但用户可能会遇到点击后等待的情况，需要做好提示

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