JavaScript 中怎么用 AbortController 终止国际化文案热加载-js教程-PHP中文网

abortcontroller可终止国际化热加载请求：切换语言时先abort旧请求再发新请求；轮询更新需复用controller防堆积；动态import需用promise.race模拟取消；组件卸载时须清理避免内存泄漏。

javascript 中怎么用 abortcontroller 终止国际化文案热加载

在 JavaScript 中用 AbortController 终止国际化文案热加载，核心是把热加载请求（如 fetch）与控制器绑定，当检测到新语言包就绪或用户切换语言时，主动中止旧请求，避免过期响应覆盖最新文案。

监听语言变更并中止旧请求

每次触发语言切换（例如用户点选“English”），先调用 abort() 清理上一次未完成的加载任务，再发起新请求：

let controller = null;

function loadLocale(lang) {
  // 中止前一次请求（如果存在且未完成）
  if (controller) controller.abort();

  controller = new AbortController();
  const signal = controller.signal;

  return fetch(`/i18n/${lang}.json`, { signal })
    .then(res => {
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return res.json();
    })
    .catch(err => {
      if (err.name === 'AbortError') {
        console.log('加载被取消：旧语言包请求已中止');
      } else {
        console.error('加载失败', err);
      }
    });
}

// 示例：切换语言
loadLocale('zh-CN'); // 发起中文加载
loadLocale('en-US'); // 自动中止中文请求，发起英文加载

热加载轮询场景下的安全终止

若通过定时轮询检查语言包更新（如监听文件修改时间戳），需确保每次轮询都复用/重置 controller，防止多次并发请求堆积：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

let pollController = null;
let polling = false;

function startPolling(lang, interval = 5000) {
  if (polling) return;
  polling = true;

  const poll = () => {
    if (pollController) pollController.abort();
    pollController = new AbortController();

    fetch(`/i18n/${lang}.json?ts=${Date.now()}`, {
      signal: pollController.signal
    })
      .then(res => res.json())
      .then(newMessages => {
        // 比对版本或哈希，仅当内容变化时更新 i18n 实例
        updateI18nMessages(newMessages);
      })
      .catch(err => {
        if (err.name !== 'AbortError') {
          console.warn('轮询请求异常，将重试', err);
        }
      })
      .finally(() => {
        if (polling) setTimeout(poll, interval);
      });
  };

  poll();
}

function stopPolling() {
  if (pollController) pollController.abort();
  polling = false;
}

配合模块动态导入（import()）时的处理

若热加载使用 import('./locales/en-US.js') 动态导入，AbortController 无法直接中止 import —— 但可结合 Promise.race 模拟取消语义，提前拒绝过期导入任务：

let currentImportKey = 0;

async function loadLocaleModule(lang) {
  const key = ++currentImportKey;

  try {
    const mod = await Promise.race([
      import(`./locales/${lang}.js`),
      new Promise((_, reject) =>
        setTimeout(() => reject(new Error('Import timeout')), 10000)
      )
    ]);

    // 若当前 key 已被更新，说明有新请求发出，忽略本结果
    if (key !== currentImportKey) {
      console.log('忽略过期的语言模块加载结果');
      return null;
    }

    return mod.default || mod;
  } catch (err) {
    if (key !== currentImportKey) return null;
    throw err;
  }
}