0

Gostaria que o meu XMLHttpRequest esperasse a resposta.

function UploadFile(campoFile, urlUpload, campoNome) {
    var img = $("#" + campoFile).val();
    var resultado = false;
    if (img) {
        var file = document.getElementById(campoFile).files[0];
        var formData = new FormData();
        formData.append(file.name, file);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        Carregar();
        var url = urlUpload;
        url = '@Url.Content("~/")' + url;
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var dados = JSON.parse(xhr.responseText);
                if (dados.Nome != "") {
                    $('#' + campoNome).val(dados.Nome);
                    resultado = true;
                } else {
                    alert("Ocorreu um erro no upload da imagem.");
                    $('#loader').remove();
                    resultado = false;
                }
            }
        }
        xhr.send(formData);
    }
    return resultado;
}

Já tentei alterar o xhr.open('POST', url, true); pra false, porém daí meu carregar não funciona.

2 Respostas 2

2

Na MDN existem alguns exemplos de requisições síncronas, o primeiro deles:

var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {
  console.log(request.responseText);
}

O que está a errar é que não deve usar um callback com o onreadystatechange para isso. Apenas leia xhr.responseText e faça o que você faria no callback diretamente depois do send().

Mas lembre-se que isso impede que qualquer outro código javascript execute na página. Se o usuário clicar em um botão, por exemplo, o onclick não será disparado e a interface parecerá estar travada. Da perspectiva do usuário, pode ser ruim. A não ser, é claro, que você esteja usando Web Workers.


Em resumo:

[...]
var url = urlUpload;
var xhr = new XMLHttpRequest();
xhr.open('POST', url, false);
xhr.send(formData);
var dados = JSON.parse(xhr.responseText);
[...]
4
  • Não entendi sua resposta Guilherme, estou a utilizar o método POST e não consegui resolver aqui. Commented 8/08/2014 às 12:38
  • @DiegoZanardo O exemplo é o mesmo. Basta trocar "GET" por "POST". Commented 8/08/2014 às 13:05
  • Como você disse, o problema é a interface parecer travada. Commented 8/08/2014 às 13:21
  • Nesse caso sua função UploadFile não deve retornar coisa alguma e toda a ação posterior deve ocorrer dentro do callback. Em vez de fazer resultado = true;, execute o código que deve ser executado caso o upload tenha sucesso. Commented 8/08/2014 às 13:23
0

Olá, tem uma forma de fazer isso simples. usando o axios

//usando o  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get("https://api.github.com/users/itasouza")
.then(function(response){
    //esperando a resposta para fazer alguma coisa
    console.log(response);
    console.log("login :" + response.data.login);
    console.log("id : " + response.data.id);
})
.catch(function(error){
    console.log(error);
})

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 .