javascript - 将 Async/Await 函数转换为针对 IE 11 的普通 ES5

Question

所以，我需要你的帮助/协助来完成这些任务。

我使用 Arrows 创建了一个搜索功能。测试后，我注意到它不能单独在 IE 11 中工作。它适用于其他浏览器。后来我意识到箭头函数在 IE 11 上不起作用。 所有让它发挥作用的努力都被证明是失败的。

请在下面找到箭头函数和我从箭头函数及其对应的 JS 创建的 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>

普通 JS 函数(我从箭头函数创建的)

<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>

JSON 文件

[
    {
        "name":"Running ",
        "url": "url": "http://google.com"
    },
    {
        "name":"Javascript",
        "url": "url": "http://google.com"
    },
    {
        "name":"On old browser",
        "url": "url": "http://google.com"
    },
    {
        "name":"without arrow",
        "url": "url": "http://google.com"
    },
    {
        "name":"functions and works well",
        "url": "http://google.com"
    },
    {
        "name":"Please, help me",
        "url": "url": "http://google.com"
    },
    {
        "name":"I gladyl appreciate your response",
        "url": "url": "http://google.com"
    },
]

我已经更改了箭头功能，我注意到 IE 11 不支持 Await/Async。是否有人可以使此代码在 IE.11 上运行所有帮助和帮助将不胜感激

谢谢

编辑

我已经能够使用 Babel 转译器:https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator/

这是我的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

Answer 1

检查这个link

我使用 babel repl 来生成 IE 兼容的代码。您应该按照@David Barshav 提到的说明进行操作，但您需要正确配置您的 babel 以使用 IE 11。您还应该检查 preset-env用于通天塔。

编辑: 下面转译的代码只是一个可用的 javascript 版本。 但是 缺少的部分是 IE 11 不支持 fetch。您必须为此使用 polyfill 或使用 XHR 请求或使用简化发出 XHR 请求的库(如 jquery)。

Github Fetch填充物。 bluebird Promise polyfill.

生成的代码:

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

var searchStates = function searchStates(searchText) {
  var res, states, matches;
  return regeneratorRuntime.async(function searchStates$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          _context.next = 2;
          return regeneratorRuntime.awrap(fetch('../data/info.json'));

        case 2:
          res = _context.sent;
          _context.next = 5;
          return regeneratorRuntime.awrap(res.json());

        case 5:
          states = _context.sent;
          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);

        case 10:
        case "end":
          return _context.stop();
      }
    }
  });
};

var outputHtml = function outputHtml(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);
});