Javascript 将异步/等待功能转换为针对IE 11的正常ES5

因此，我需要你的帮助/协助来完成这些任务

我使用箭头创建了一个搜索函数。在测试之后，我注意到它不能单独在IE11中工作。但它可以在其他浏览器上运行。后来我意识到箭头函数在IE 11上不起作用。 一切努力都以失败告终

请在下面找到我从arrow函数及其对应的JS创建的arrow函数和JS函数

箭头函数

<script>
    var search = document.getElementById('searchTerm_de');
    var search2 = document.getElementById('searchTerm_en');
    var matchList = document.getElementById('result');

    var searchStates = async searchText => {
        var res = await fetch('../data/info.json');
        var states = await res.json();

        let matches = states.filter(state => {
            var regex = new RegExp(`^${searchText}`,'gi');
            return state.name.match(regex);
        });

        if(searchText.length === 0){
            matches = [];
            matchList.innerHTML = '';
        }
        outputHtml(matches);
    };

    var outputHtml = matches => {
       if(matches.length > 0){
            var html = matches.map(match =>
                `<div class="card result-list de en">
                   <h6><span class="my-result"><a href="${match.url}" target="_blank">${match.name}</a> </h6></span>
               </div>
`).join('');

                matchList.innerHTML = html;
            }
        };
        search.addEventListener('input', () => searchStates(search.value));
        search2.addEventListener('input', () => searchStates(search2.value));
    </script>

<script>

    var search = document.getElementById('searchTerm_de');
    var search2 = document.getElementById('searchTerm_en');
    var matchList = document.getElementById('result');

    var searchStates = async function searchStates (searchText) {
        var res = await fetch('../data/info.json');
        var states = await res.json();
        var matches = states.filter(function (state) {
            var regex = new RegExp("^".concat(searchText), "gi");
            return state.name.match(regex);
        });

        if (searchText.length === 0) {
            matches = [];
            matchList.innerHTML = '';
        };

        outputHtml(matches);
    };

    var outputHtml = function (matches) {
        if (matches.length > 0) {
            var html = matches.map(function (match) {
                return "<div class=\"card result-list de en\">\n\t\t<h6><span class=\"my-result\"><a href=\"".concat(match.url, "\" target=\"_blank\">").concat(match.name, "</a> </h6></span>\n\t</div>\n\t");
            }).join('');
            matchList.innerHTML = html;
        }
    };

    search.addEventListener('input', function () {
        return searchStates(search.value);
    });
    search2.addEventListener('input', function () {
        return searchStates(search2.value);
    });

</script>

我已经更改了arrow函数，我注意到IE11不支持wait/Async。有没有人可以让这段代码在IE.11上运行？所有的帮助和帮助都将被清楚地感谢

谢谢

编辑

我已经能够使用Babel transpiler：

这是我的HTML

              <div class="search">
              <input type="text" class="searchTerm de" id="searchTerm_de" placeholder="Was suchst du ?" onfocus="this.placeholder=''" onblur="this.placeholder='Was suchst du ?'">
              <input type="text" class="searchTerm en" id="searchTerm_en" placeholder="What are you looking for ?" onfocus="this.placeholder=''" onblur="this.placeholder='What are you looking for ?'">
          </div>
              <ul class="list-group-search" id="result"></ul>
              <br/>
          </div> ```

**and this is the transpiled/compiled ES5 for IE 11**


     <script>

            function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error);
          return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

      function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args
      ); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

      var search = document.getElementById('searchTerm_de');
      var search2 = document.getElementById('searchTerm_en');
      var matchList = document.getElementById('result');

      var searchStates =  function () {
              var _ref = _asyncToGenerator(function* (searchText) {
                  var res = yield fetch('./data/info.json');
                  var states = yield res.json();
                  let matches = states.filter(function(state) {
                      var regex = new RegExp(`^${searchText}`, 'gi');
                      return state.name.match(regex);
                  });

                  if (searchText.length === 0) {
                      matches = [];
                      matchList.innerHTML = '';
                  }

                  outputHtml(matches);
              });

              return function searchStates(_x) {
                  return _ref.apply(this, arguments);
              };
          }();

      var outputHtml =function(matches) {
          if (matches.length > 0) {
              var html = matches.map(match => `<div class="card result-list de en">
              <h6><span class="my-result"><a href="${match.url}" target="_blank">${match.name}</a> </h6></span>
      </div>
      `).join('');
              matchList.innerHTML = html;
          }
      };

      search.addEventListener('input', () => searchStates(search.value));
      search2.addEventListener('input', () => searchStates(search2.value));

      </script>

While the JSON file still remains the same.

It's still working on all browsers except IE 11.

Its gettings tiring but I'm not determined to give up

Anyone else knows what could be done at this point to make the code run on IE 11

Thanks

```
**这是IE11的传输/编译ES5**
函数asyncGeneratorStep（gen，resolve，reject，_next，_throw，key，arg）{try{var info=gen[key]（arg）；var value=info.value；}catch（error）{reject（error）；
return；}if（info.done）{resolve（value）；}else{Promise.resolve（value）。然后（_next，_throw）；}
函数_asyncToGenerator（fn）{return function（）{var self=this，args=arguments；返回新承诺（函数（解析，拒绝）{var gen=fn.apply（self，args
)；函数下一步（值）{asyncGeneratorStep（gen，resolve，reject，下一步，throw，“next”，value）}函数throw（err）{asyncGeneratorStep（gen，resolve，reject，下一步，throw，“throw”，err）}；}
var search=document.getElementById（'searchTerm_de'）；
var search2=document.getElementById（'searchTerm_en'）；
var matchList=document.getElementById（'result'）；
var searchStates=函数（）{
var\u ref=\u asyncToGenerator（函数*（搜索文本）{
var res=yield fetch（'./data/info.json'）；
var states=yield res.json（）；
让matches=states.filter（函数（状态）{
var regex=newregexp（`^${searchText}`，'gi'）；
返回state.name.match（regex）；
});
if（searchText.length==0）{
匹配项=[]；
matchList.innerHTML=''；
}
outputHtml（匹配）；
});
返回函数searchStates（x）{
返回_ref.apply（这是参数）；
};
}();
var outputHtml=函数（匹配项）{
如果（匹配。长度>0）{
var html=matches.map（match=>`
`).加入（“”）；
matchList.innerHTML=html；
}
};
search.addEventListener（'input'，（）=>searchStates（search.value））；
search2.addEventListener（'input'，（）=>searchState（search2.value））；
而JSON文件仍然保持不变。
除了IE 11，它还在所有浏览器上运行。
这很累，但我没有决心放弃
其他人都知道在这一点上可以做些什么来让代码在IE11上运行
谢谢

我刚刚使用babel预置、运行时和重新生成器转换为旧版本，它将在IE中工作

var search=document.getElementById（'searchTerm_de'）；
var search2=document.getElementById（'searchTerm_en'）；
var matchList=document.getElementById（'result'）；
var searchStates=函数searchStates（searchText）{
变量、状态、匹配；
返回_registrator.default.async（函数searchStates$（_context2）{
而(1){
开关（_context2.prev=_context2.next）{
案例0：
_context2.next=2；
返回_registrator.default.awrap（fetch（'../data/info.json'）；
案例2：
res=_context2.sent；
_context2.next=5；
返回_registrator.default.awrap（res.json（））；
案例5：
states=_context2.sent；
匹配=状态。过滤器（函数（状态）{
var regex=new RegExp（“^”.concat（searchText），“gi”）；
返回state.name.match（regex）；
});
if（searchText.length==0）{
匹配项=[]；
matchList.innerHTML=''；
}
outputHtml（匹配）；
案例9：
案例“结束”：
return_context2.stop（）；
}
}
});
};
var outputHtml=函数outputHtml（匹配项）{
如果（匹配。长度>0）{
var html=matches.map（函数（匹配）{
返回“\n\n\n”）；
}).加入（“”）；
matchList.innerHTML=html；
}
};
search.addEventListener（'input'，function（）{
返回searchStates（search.value）；
});
search2.addEventListener（'input'，function（）{
返回searchStates（search2.value）；
});

要在IE 11中启用对

async

的支持，您需要确保在页面中包含。这可以直接加载，也可以通过

检查这个

我使用babel repl生成与IE兼容的代码。你应该按照上面提到的说明@David Barshav操作，但是你需要正确配置你的babel才能使用IE 11。你也应该检查一下巴贝尔

编辑：下面传输的代码只是一个可行的javascript版本但是 缺少的部分是IE11不支持的

fetch

。您必须为此使用polyfill，或者使用XHR请求，或者使用简化XHR请求的库（如jquery）

Github poyfill。 蓝知更鸟

生成的代码：

var search=document.getElementById（'searchTerm_de'）；
var search2=document.getElementById（'searchTerm_en'）；
var matchList=document.getElementById（'result'）；
var searchStates=函数searchStates
              <div class="search">
              <input type="text" class="searchTerm de" id="searchTerm_de" placeholder="Was suchst du ?" onfocus="this.placeholder=''" onblur="this.placeholder='Was suchst du ?'">
              <input type="text" class="searchTerm en" id="searchTerm_en" placeholder="What are you looking for ?" onfocus="this.placeholder=''" onblur="this.placeholder='What are you looking for ?'">
          </div>
              <ul class="list-group-search" id="result"></ul>
              <br/>
          </div> ```

**and this is the transpiled/compiled ES5 for IE 11**


     <script>

            function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error);
          return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

      function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args
      ); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

      var search = document.getElementById('searchTerm_de');
      var search2 = document.getElementById('searchTerm_en');
      var matchList = document.getElementById('result');

      var searchStates =  function () {
              var _ref = _asyncToGenerator(function* (searchText) {
                  var res = yield fetch('./data/info.json');
                  var states = yield res.json();
                  let matches = states.filter(function(state) {
                      var regex = new RegExp(`^${searchText}`, 'gi');
                      return state.name.match(regex);
                  });

                  if (searchText.length === 0) {
                      matches = [];
                      matchList.innerHTML = '';
                  }

                  outputHtml(matches);
              });

              return function searchStates(_x) {
                  return _ref.apply(this, arguments);
              };
          }();

      var outputHtml =function(matches) {
          if (matches.length > 0) {
              var html = matches.map(match => `<div class="card result-list de en">
              <h6><span class="my-result"><a href="${match.url}" target="_blank">${match.name}</a> </h6></span>
      </div>
      `).join('');
              matchList.innerHTML = html;
          }
      };

      search.addEventListener('input', () => searchStates(search.value));
      search2.addEventListener('input', () => searchStates(search2.value));

      </script>

While the JSON file still remains the same.

It's still working on all browsers except IE 11.

Its gettings tiring but I'm not determined to give up

Anyone else knows what could be done at this point to make the code run on IE 11

Thanks

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      },
        "useBuiltIns": true
    }],

  ]
}