Как правильн использовать Promise AJAX?

Question

[Ninja Mate]

есть несколько похожих функций, хочу их все одновременно запустить и дождаться выполнения последней через Promise.all

getTotalGender(){
        
        var that = this;
     
        jQuery.post(

            MyAjaxChart.ajaxurl,
            {
                dataType: 'json', 
                'action': 'ReportGenderTotal',
                async: true
            }
        ).error( ( response )=> console.log( response )
        ).done( ( response )=> {
//нужно дождаться выполнения в Promise.all
                var myArray = JSON.parse( response );

                that.setState({ datasetGender: myArray });
           
            }
        );
    }

и хочу их запускать их

Promise.all( [ this.getTotalGender(), ... ] ).then( ()=> {
            
            console.log('this.state.datasetGender');
            console.log(this.state.datasetGender);//пустое значение, тк Promise не ждет полного выполнения
            
            this.setState({ ReportGender: <ReportGender
                dataset = { this.state.datasetGender }
            /> });
            
        });

Как такое сделать?

Answer 1

[Виталий]

Оберни ажакс в промис, а далее работай как в учебнике.
Только с промис алл есть подвох, если 1 из промисов даст реджект, то все остальные промисы будут потеряны.

getTotalGender(){
        var that = this;
        return new Promise((resolve, reject)=>{
                 jQuery.post(

            MyAjaxChart.ajaxurl,
            {
                dataType: 'json', 
                'action': 'ReportGenderTotal',
                async: true
            }
        ).error( ( response )=> {reject(response)}
        ).done( ( response )=> {
                      //нужно дождаться выполнения в Promise.all
                      resolve(response);
             });
});

Теперь мы имеем промис и можем запихнуть его в промис алл...

Comments

[Ninja Mate]

уж извините, но понятнее не стало

[Виталий]

Ninja Mate: обернуть в промис, это значит взять функционал чего либо, запихнуть его внутрь промиса и там, где приходит результат, сделать выход из промиса. Чтобы стало понятнее, изучите, что такое промисы,

[Ninja Mate]

Виталий: я и читаю, вижу вот такой код на promisejs.org

var jQueryPromise = $.ajax('/data.json');
var realPromise = Promise.resolve(jQueryPromise);

и вообще не пойму куда и что запихивать

[Виталий]

Ninja Mate: так яснее?

[Ninja Mate]

Виталий: Атеист. Помогло спасибо. А можно в

resolve( that.setState({datasetGender: myArray})  );

такое поставить(пробовал не получилось)?

[Виталий]

Ninja Mate: resolve это фкнкция, которая передает параметр response в then промиса. That.setstate думаю ничего не возвращает, а потому вы потом ловите undefined

[Виталий]

Считайте resolve ретурном, до его вызова можно выполнить любые операции. Если конечно это необходимо

[Ninja Mate]

Виталий: спасибо, стало понятнее. теперь можно использовать.