如何在Ember中中止浏览器重载/刷新操作？

你说得没错，willTransition确实只负责Ember应用内部的路由跳转——比如点击返回按钮或者切换路由时才会触发，完全管不了浏览器层面的刷新或关闭操作。要解决上传中阻止页面重载的问题，我们得借助浏览器原生的beforeunload事件来实现。

下面是具体的实现步骤和代码示例：

1. 先追踪上传状态 #

首先你需要在组件或者路由里维护一个标记上传状态的变量，比如isUploading，用来判断当前是否有上传正在进行。

2. 监听浏览器的beforeunload事件 #

在组件的didInsertElement钩子（或者路由的activate钩子）里添加beforeunload事件监听，同时一定要记得在组件销毁（willDestroyElement）或者路由退出（deactivate）时移除监听，避免内存泄漏。

3. 根据上传状态判断是否阻止重载 #

在beforeunload的回调函数里，检查isUploading的状态，如果为true，就触发浏览器的确认弹窗，阻止用户意外刷新页面。

组件层面的实现示例

// app/components/file-upload.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class FileUploadComponent extends Component {
  // 追踪上传状态
  @tracked isUploading = false;

  @action
  async startUpload(file) {
    this.isUploading = true;
    try {
      // 这里替换成你的上传逻辑，比如调用API上传文件
      await this.args.uploadFile(file);
    } catch (error) {
      console.error('上传失败:', error);
    } finally {
      // 无论成功失败，都重置上传状态
      this.isUploading = false;
    }
  }

  didInsertElement() {
    super.didInsertElement();
    // 添加beforeunload事件监听
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  }

  willDestroyElement() {
    super.willDestroyElement();
    // 移除事件监听，防止内存泄漏
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
  }

  @action
  handleBeforeUnload(event) {
    if (this.isUploading) {
      // 触发浏览器的确认弹窗
      event.preventDefault();
      // 这里的字符串部分不同浏览器显示效果可能不一样，有些会用默认提示
      event.returnValue = '上传正在进行中，离开页面会中断上传，确定要继续吗？';
      return event.returnValue;
    }
  }
}

路由层面的实现示例

如果你是在路由里管理上传逻辑，可以这样写：

// app/routes/upload.js
import Route from '@ember/routing/route';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class UploadRoute extends Route {
  @tracked isUploading = false;

  activate() {
    super.activate();
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  }

  deactivate() {
    super.deactivate();
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
  }

  @action
  async startUpload() {
    this.isUploading = true;
    try {
      // 示例：用Ember Data保存上传记录
      const uploadRecord = this.store.createRecord('upload', { /* 上传数据 */ });
      await uploadRecord.save();
    } catch (error) {
      console.error('上传失败:', error);
    } finally {
      this.isUploading = false;
    }
  }

  @action
  handleBeforeUnload(event) {
    if (this.isUploading) {
      event.preventDefault();
      event.returnValue = '上传未完成，刷新页面会中断操作，请确认';
      return event.returnValue;
    }
  }
}

一些关键注意点 #

• beforeunload是浏览器原生事件，和Ember的路由系统无关，所以必须直接监听window对象。
• 不同浏览器对returnValue的处理有差异，大部分浏览器会显示自己的默认确认文案，而不是你自定义的字符串，但必须返回一个值才能触发弹窗。
• 一定要记得移除事件监听，否则组件或路由销毁后，监听还存在，会导致内存泄漏。
• 确保在上传完成、失败或者取消时，都要把isUploading重置为false，避免用户后续正常操作时还被阻止。

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