-1

Olá, estou com uma dúvida referente a chamadas assincronas no javascript. Em meu projeto, possuo um metodo que carrega os valores de resposta de uma api no formulario da tela. No entanto, dois desses campos eu faço um novo GET para um outro endpoint para popular as options de um campo tag select.

O que ocorre e que esse campo(tag select) está carregando antes da minha chamada de requisição terminar.

Exempo no código abaixo:

            $.ajax({
            type: "GET",
            url: `$edpoint/${id}/${sku}`,
            success: function (response) {

                    buildWarrantyType(response.categoryMl);

                    //Tipo de garantia
                    document.getElementById('warrantyType').value = response.warrantyType;
                  }
                });

No trecho acima, tenho uma requisição GET que retorna a response para ser preenchida no campo tipo de garantia, porém, antes desse campo ser carregado, eu chamo a função buildWarrantyType para realizar o carregamento das opções disponiveis para o campo 'warrantyType' e eu preciso que esse metodo buildWarrantyType seja executado e so então, o trecho com o campo warrantyType seria preenchido, somente a após a requisição terminar.

Segue abaixo o conteudo do metodo buildWarrantyType:

async function buildWarrantyType(CategoryMl) {

let response = await fetch(`endpointUrl/${CategoryMl}/sale_terms`);
let data = await response.json();

await responseWarrantyType(data);

}

async function responseWarrantyType(data) {

for (var i = 0; i < data.length; i++) {

    if (data[i].id == "WARRANTY_TYPE") {
        $('#warrantyType').empty();

        for (var x = 0; x < data[i].values.length; x++) {

            switch (data[i].values[x].name) {
                case "Garantia do vendedor":
                    $('#warrantyType').append($('<option>', {
                        value: 0,
                        text: data[i].values[x].name
                    }));
                    break;

                case "Garantia de fábrica":
                    $('#warrantyType').append($('<option>', {
                        value: 1,
                        text: data[i].values[x].name
                    }));
                    break;

                case "Sem garantia":
                    $('#warrantyType').append($('<option>', {
                        value: 2,
                        text: data[i].values[x].name
                    }));

                    document.getElementById('warranty').value = 0;
                    break;
            }
        }
    }
}

}

Como podem ver, nos metodos acima, já estão declarados com async e await, porém, não está dando certo. Pois os campo warrantyType continuam carregando o dado sem esperar que a requisição do metodo buildWarrantyType, seja concluído.

Gostaria de saber qual a melhor forma de resolver esse problema?

1 Resposta 1

-1

Tens que usar o await na função buildWarrantyType().

     success: async function (response) {

             await buildWarrantyType(response.categoryMl);

             //Tipo de garantia
             document.getElementById('warrantyType').value = response.warrantyType;
     }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .