将Async/Await函数转换为针对IE 11的普通ES5 [英] Converting Async/Await function to normal ES5 targetting IE 11

问题描述

因此，在这些任务上，我需要您的帮助/协助.

So, I´ll be needing your help/assistance with these tasks.

我使用Arrows创建了搜索功能.经过测试，我注意到它不能单独在IE 11中运行.它可以在其他浏览器上运行.后来我意识到，箭头功能在IE 11上不起作用. 所有使它起作用的努力都被证明是失败的.

I created a search function using Arrows. After testing, I noticed it's not working in IE 11 alone. it works on other browsers though. I later realized that arrow functions won´t work on IE 11. All efforts to make it work have proved abortive.

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

Please, find below the arrow function and the JS function which I created from the arrow function and its corresponding 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函数(我是从arrow函数创建的)

Normal JS function (That I created from the arrow function)

<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上正常工作.

I have change the arrow function and I notice the Await/Async is not supported by IE 11. Is there anyone out there who can make this code work on IE.11 All assistance and help will be clearly appreciated

谢谢

编辑

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

I have been able to use the Babel transpiler: 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

推荐答案

我刚刚转换为js，并且可以在IE中使用.

I just converted to js and It'll work in IE.

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 =
/*#__PURE__*/
function () {
  var _ref = _asyncToGenerator(function* (searchText) {
    var res = yield fetch('../data/info.json');
    var states = yield 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);
  });

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

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

如果它不起作用，请告诉我们，以便我们为您提供更好的帮助！

If it's not working, let us know, so we can assist you better!

快乐鳕鱼！！

这篇关于将Async/Await函数转换为针对IE 11的普通ES5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！