【问题标题】:Async Await without using async Await不使用异步等待的异步等待
【发布时间】:2018-08-21 17:05:46
【问题描述】:

我正在尝试将我的代码从使用 Async/Await 方法转换为基本的 .then() 承诺。原因是 Async/Await 在 IE 上不起作用。 我是 Promise 的新手,后来终于掌握了使用 Async/Await 的窍门,但现在需要稍微转换一下时间以使我的代码在 IE 中工作。

在 Codepen.io 上使用 Async/Await here 的工作代码

请,任何帮助将不胜感激。

Javascript 尝试不使用 Async/Await:

const getPromise = () => {  
return new Promise((resolve, reject) => {
    setTimeout(() => {
      $.getJSON( countriesUrl, function( data ) {
      }).done(function(data){
        resolve(data);
      }).fail(function(error){
        var reason = new Error('mom is not happy today');
        reject(reason);
     });
    }, 500);
  });
};


var bcp = {
init: function(){
  bcp.topbar = parseInt($('.topbar').css('height'), 10);
  bcp.bottombar = parseInt($('.bottom-bar').css('height'), 10);
  if(!bcp.countriesLoaded){
    console.log('testing');
      bcp.addCountries().then((countries) => {
        console.log('hello');
      bcp.popup = $($.fancybox.getInstance().current.src)[0];
      bcp.distributorArrays(countries);
    });
  }else {
    bcp.addEventListeners();
  }
},
toggleCountrySection: function(){
  $('#locationModal').find('.loading').toggleClass('show');
  $('.content').toggle();
},
getCountries: function() {
  console.log('get Countries');
  bcp.toggleCountrySection();
},
addCountries: function() {
  (() => {
      getPromise()
      .then(result => {
        console.log('result', result);
        var data = result;
        return data;
      }).then(function(data){
        var countries = data;
          bcp.toggleCountrySection();
          bcp.countriesLoaded = true;
          console.log('test', countries);
          return countries;
      })
      .catch(err => {
          console.log(err);
      });
  })();
};

我从未收到 console.log('hello')。所以我的函数 bcp.addCountries().then((countries) => {}) 没有重新输出任何内容,或者我觉得我没有正确使用 .then()。

这是我使用 Async/Await 的工作代码:

init: function(){
  bcp.topbar = parseInt($('.topbar').css('height'), 10);
  bcp.bottombar = parseInt($('.bottom-bar').css('height'), 10);
  if(!bcp.countriesLoaded){
      bcp.addCountries().then((countries) => {
      bcp.popup = $($.fancybox.getInstance().current.src)[0];
      bcp.distributorArrays(countries);
    });
  }else {
    bcp.addEventListeners();
  }
},
toggleCountrySection: function(){
  $('#locationModal').find('.loading').toggleClass('show');
  $('.content').toggle();
},
getCountries: function() {
  console.log('get Countries');
  bcp.toggleCountrySection();
  return new Promise(resolve => {
    setTimeout(() => {
      $.ajax({
        url: countriesUrl,
        success: function(data) {
          var results = JSON.parse(data);
          resolve(results);
        }
      });
    }, 1500);
  });
},
addCountries: async function() {
  var countries = await bcp.getCountries();
  bcp.toggleCountrySection();
  bcp.countriesLoaded = true;
  return countries;
},

【问题讨论】:

  • 可能使用像 Babel 这样的编译器会更容易。
  • 我不想使用构建过程或转译器。
  • 但是 ES6 承诺在 Internet Explorer 中也不起作用?
  • 我正在使用 bluebird.js

标签: javascript promise async-await


【解决方案1】:

获取工作版本(来自您的评论 Here is my working code using Async/Await:)并将 addCountries 更改为此。

使用的答案:

return bcp.getCountries().then((countries) => {
    console.log('test', countries);
    bcp.toggleCountrySection();
    bcp.countriesLoaded = true;
    return countries;
});

【讨论】:

  • 当我将您的代码插入 bcp.addCountries 时不会返回国家/地区,因此当我在 console.log(countries) 中出现未定义时。我发布了工作代码的 codepen,如果有帮助,您可以在其中进行测试。
  • 嘿@Igor,我最终使用了您的代码,但从函数内返回国家/地区并且它有效。谢谢
猜你喜欢
  • 2016-07-07
  • 2016-03-25
  • 2017-10-09
  • 1970-01-01
  • 2017-12-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多