Problems trying to get and pass data from a promise

Question

I am doing a job with a colleague, in which he chooses ajax to make requests to a web service, and I use fetch to make a request to an external api, I am running into a problem and it is that at the time of obtaining the data From the api through fetch it brings me the data after a certain time, but when I pass that data through ajax it sends the empty variable, which is logical because the fetch response takes a while to fill my variable, like this that what I try is to put a setTimeout in the ajax to wait a while and that it executes after my fetch request fills the data, but this does not work and does not perform any process:
This is my JavaScript:

$("body").on('click', '#MainContent_lnk_actualizar_foto', e => {
    e.preventDefault();
    let Archivo = $('#MainContent_file_foto')[0].files[0];
    let ubicacion = '';
    let params = new URLSearchParams(location.search);
    let Id_Usuario = params.get('Id_Usuario');
    const datos = new FormData();
    datos.append('imagen', Archivo);
    datos.append('ubicacion', 'perfil');
    fetch(`http://192.168.0.37:52456/api/Archivos/`, {
        method: 'POST',
        body: datos
    }).then(res => res.json())
        .catch(error => console.error('Error:', error))
        .then(response => {
            ubicacion = response.lugar
        })
        
    setTimeout(() => {
        $.ajax({
            type: 'POST',
            url: 'WebService_V_Perfil.asmx/SubirArchivos',
            data: '{"Archivo": "' + ubicacion + '","Id_Usuario": "' + Id_Usuario + '"}',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: result => {
                console.log(result);
                console.log(ubicacion);
            }
        })
    }, 3000
});

I see a lot of missing syntax in your snippet. Please verify and fix. — Joseph, Sep 20 '21 at 20:26
Instead of guessing how long it will take to get the data, why not just put your ajax call in the `then` function of the `fetch`? — Heretic Monkey, Sep 20 '21 at 20:44
Well don't use a timeout, just place the code that uses `ubicacion` inside the `.then()` callback! — Bergi, Sep 20 '21 at 20:44
https://stackoverflow.com/help/minimal-reproducible-example also note that your `$.ajax` is outside the `then` — Toni Michel Caubet, Sep 20 '21 at 20:44
Btw, don't build JSON by concatenating strings, use `JSON.stringify` — Bergi, Sep 20 '21 at 20:46

pazitos10 · Accepted Answer · 2021-09-20T20:51:12.053

Besides the syntax errors in your code, the only way you can use the values that return from the fetch call is by putting the code that process those results in a then block but leave the catch block to the end. Otherwise, in this case your code will not run as expected as the second then() block is expecting something that the previous catch() doesn't return.

fetch(`http://192.168.0.37:52456/api/Archivos/`, {
  method: 'POST',
  body: datos
})
.then(res => res.json())
.then(response => {
  const ubicacion = response.lugar;
  $.ajax({
    type: 'POST',
    url: 'WebService_V_Perfil.asmx/SubirArchivos',
    data: '{"Archivo": "' + ubicacion + '","Id_Usuario": "' + Id_Usuario + '"}',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: result => {
      console.log(result);
      console.log(ubicacion);
    }
  })
})
.catch(error => console.error('Error:', error))

Also, I don't think you need to use ajax to do what the same task as fetch does.

Thanks @Bergi, I forgot the `const`. – pazitos10 Sep 20 '21 at 20:47 — pazitos10, Sep 20 '21 at 20:47

Problems trying to get and pass data from a promise

1 Answers1