비동기 호출의 특징은 

호출의 순서가 callback의 순서와 같다는 걸 보장하지 않는다.

그리고 비동기함수는 호출후 리턴을 받을 동안 기다리지 않고 바로 다음 로직으로 진행한다.

이 특징이 컴퓨터의 자원을 대기없이 최대한 활용하는 장점이기도 하다.

그러나 때때로 비동기호출은 하되, 호출 결과를 받고나서, 다음 로직이 작동되어야 하는 경우가 있다.

아래 로직이 그런 경우이다. 

Grid의 각 row를 순회하면서 각각 ajax를 호출여 그 결과를 리턴받아 다시 해당 row에 반영하는 예시이다.

onSelVndrPfrm : function()
{
    var me = this;

    var _gridVndr       = me.$.gridPanelVndr;
    var _providerVndr   = _gridVndr.getDataProvider();

    _gridVndr.clearAllSort();
    _gridVndr.clearAllFilter();

    var _fnc = async function(data)
    {
        var _param          = {};
        _param.vd_cd        = data.vd_cd;
        _param.sg_cd        = data.sg_cd;
        _param.cpt_type_cd  = me.rqh.cpt_type_cd;

        var _ajax   = new SCAjax();
        _ajax.url   = "/bp/pro/rfx/selVndrPfrm.do";
        _ajax.body  = _param;

        let _promise = new Promise(function(resolve)
        {
            UT.request(_ajax, function(event)
            {
                var _result = event.target.lastResponse;

                if (UT.isNotEmpty(_result))
                {
                    var _data       = {};
                    _data.slct_cnt  = _result.slct_cnt;
                    _data.sbmt_cnt  = _result.sbmt_cnt;
                    _data.part_cnt  = _result.part_cnt;

                    resolve(_data);
                }
            });
        });

        return await _promise;
    }

    _providerVndr.getItems().forEach(function(data, index, array)
    {
        _fnc(data).then(function(value)
        {
            _providerVndr.setItemAt(index, value);
        });
    });
}

위 로직은 비동기인 ajax를 호출하지만 그 결과를 받고을때 까지 기다리다(await) 결과가 return되면(resolve)

호출한 함수(_fnc(data))로 다시 return하여 결과(value)를 받아(then)화면에 반영하는 예시이다.

아래의 두 예시는 결과가 같다.

function myDisplay() {
  let myPromise = new Promise(function(resolve, reject) {
    setTimeout(function() { resolve("I love You !!"); }, 3000);
  });
 
  myPromise.then(function(value) {
    document.getElementById("demo").innerHTML = value;
  });
}

async function myDisplay() {
  let myPromise = new Promise(function(resolve, reject) {
    setTimeout(function() { resolve("I love You !!"); }, 3000);
  });

  document.getElementById("demo").innerHTML = await myPromise;
}

async, await는 IE에서는 지원하지 않는다.

Javascript의 비동기
https://www.w3schools.com/js/js_async.asp

Dart의 비동기
https://blog.daonelab.com/post/45/1857/