如何检查两次提取是否结束并开始其他操作？

Question

我有一个 onchange 事件，我在其中调用了两次提取。我需要获得这些提取的响应并执行一个操作。但是，由于提取是异步的，因此操作无法正确执行。有一种方法可以使用类似“等待这些提取完成然后到这个？”

Obs：我在下面的代码中使用 Javascript 和 Jinja2

{% for row in tbl_cli %}
<script>
  
        
         document.getElementById("{{ row['ID_ROW_GRTE'] }}").onchange = function(){
            inicial =  document.getElementById("{{ row['ID_ROW_GRTE'] }}").value.lastIndexOf("(");
            final =  document.getElementById("{{ row['ID_ROW_GRTE'] }}").value.lastIndexOf(")");
            codag_para =  document.getElementById("{{ row['ID_ROW_GRTE'] }}").value.substring(inicial+1,final);
            cnpj_tp = document.getElementById("{{ row['ID_ROW_GRTE'] }}_{{ row['CD_CPF_CNPJ'] }}_{{ row['CD_T_PES'] }}").innerHTML;
            chave = codag_para + "_" + cnpj_tp
            codag_de = document.getElementById("codag_{{ row['ID_ROW_GRTE'] }}").innerHTML;
            segmento_de = document.getElementById("segmento_de_{{ row['ID_ROW_GRTE'] }}").innerHTML;
        
            fetch('/select_cli/' + chave).then(function(response){
                response.json().then(function(data){
                    //let optionHTML = '<option value="" disabled selected>Selecione o Gerente</option>';
                    let optionHTML = '';
                    
                    json_string = JSON.stringify(data)
                    count = json_string.length; //se o tamanho da string for maior que 15, então tem conta corrente
                    
                    cta_corrente = json_string.substring(json_string.lastIndexOf(':')+1,json_string.lastIndexOf(']')-1)
                    if (count > 15) {
                        optionHTML += '<i class="fa fa-check-circle" aria-hidden="true" style="color: green"></i>';
                        document.getElementById("cc_dest_flag_{{ row['ID_ROW_GRTE'] }}").value = cta_corrente;
                    } else {
                        optionHTML += '<i class="fa fa-times-circle" aria-hidden="true" style="color: red"></i>';
                    }

                    document.getElementById("cc_dest_{{ row['ID_ROW_GRTE'] }}").innerHTML = optionHTML;

                    });
                });
            
            
            
            fetch('/select_codag/' + codag_para).then(function(response){
            response.json().then(function(data){
                let optionHTML = '';
                

                json_string = JSON.stringify(data)
                segmento_para_ini = json_string.lastIndexOf(":")
                segmento_para_fim = json_string.lastIndexOf('"')
                segmento_para = json_string.substring(segmento_para_ini+2,segmento_para_fim)

                codag_de = codag_de.substring(1,6)


                if (segmento_para == segmento_de && codag_de == codag_para) {
                    optionHTML += 'Mesmo Segmento <br> Mesma Agência';
                } else if (segmento_para == segmento_de && codag_de != codag_para) {
                    optionHTML += ' Mesmo Segmento <br> Nova Agência';
                } else if (segmento_para != segmento_de) {
                    optionHTML += ' Novo Segmento <br> ' + segmento_para;
                } else {
                    optionHTML += ' Movimento não mapeado'
                }
                
                document.getElementById("movimento_{{ row['ID_ROW_GRTE'] }}").innerHTML = optionHTML;

                });
            });
 ############## DO SOMETHING AFTER THE FETCHS #################################

            };  


</script>  
{% endfor %}

在此先感谢您的帮助

Answer 1

由于 fetch returns 承诺您可以运行使用 then 顺序或并行使用 Promise.all.

例如，有：

const selectCli = () => {
  return fetch(…)
}
const selectCodag = () => {
  return fetch(…)
}

使用then，他们会一个接一个地被调用：

selectCli.then(selectCodag).then(() => console.log("both done"))

使用 Promise.all 它们将被并行调用：

Promise.all([
  selectCli,
  selectCodag,
]).then(() => console.log("both done"))

如何检查两次提取是否结束并开始其他操作？

How to check if two fetches were conclude and start other action?

javascript

fetch

jinja2