JavaScript中类似await的函数？IE11下Word.js异步函数失效问题

一、关于JavaScript中类似await的功能 #

首先，await本身就是JavaScript里专门用于异步等待的语法，它只能在被async标记的函数内部使用，作用是等待一个Promise对象完成并返回结果。如果要找功能类似的替代方案，在async/await（ES2017引入）出现之前，开发者都是用Promise.then()链式调用来实现异步等待逻辑——说白了，await就是Promise.then()的语法糖，让异步代码看起来更像同步代码，写起来更简洁。

举个直观的对比例子：

// 用await的写法
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

// 用then()链式调用的写法
function fetchData() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));
}

二、IE11中函数无法工作的问题 #

这问题的核心原因非常明确：IE11完全不支持ES2017引入的async/await语法，而且它原生也不支持Promise对象——这直接导致你的代码在IE11里根本无法解析运行，而Firefox等现代浏览器支持这些ES6+特性，所以能正常工作。

要让代码在IE11里跑起来，你需要做两件关键的事：

1. 引入Promise的polyfill（比如es6-promise），填补IE11对Promise的支持空白；
2. 把所有async/await的写法改成基于Promise.then()的链式调用，同时保留原来的串行执行逻辑（必须等上一次context.sync()完成后再插入段落）。

改写后的可兼容IE11的代码示例 #

function setup() {
  return Word.run(function(context) {
    // 用Promise.reduce实现串行循环，保证每次sync完成后再执行下一步
    return [0, 1, 2, 3, 4].reduce(function(prevPromise, i) {
      return prevPromise.then(function() {
        var controler = context.document.contentControls.getByTag("myTag" + i);
        controler.load();
        return context.sync().then(function() {
          controler.items[0].insertParagraph("Adding paragraph " + i);
        });
      });
    }, Promise.resolve()); // 初始化一个已完成的Promise作为起点
  });
}

补充注意事项 #

• 务必在你的业务脚本之前引入Promise polyfill，比如：

  <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
  

• 另外，Word JavaScript API在IE11中的支持有一定限制，部分方法可能存在兼容性差异，建议你确认核心API（比如context.sync()、insertParagraph）的兼容性后再部署，不过这两个核心方法在IE11中是可以正常使用的。

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