不使用异步等待的异步等待

Posted 2023-02-24

【中文标题】不使用异步等待的异步等待

【英文标题】：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 这样的编译器会更容易。

medium.com/@zwacky/…

我不想使用构建过程或转译器。

但是 ES6 承诺在 Internet Explorer 中也不起作用？

我正在使用 bluebird.js

【参考方案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，我最终使用了您的代码，但从函数内返回国家/地区并且它有效。谢谢