0

Tengo esta promesa que se encarga de asignarle una imagen a los items que traigo de otro endpoint, funcionaba bien hasta que quise pasarle un parametro title a la funcion getImage, tuve que poner el for fuera de esta para iterar y que le pase por cada item pero el tema es que luego no puedo asignar img a items porque items no entra dentro del then. Supongo que se deberia hacer una cadena de promises o algo asi, algun consejo?

  getImage (title) {
    var headers = {
      method: 'GET',
      headers: {
        "Api-Key": "xxx",
        "cache-control": "no-cache"
      }
    }
    return new Promise((resolve, reject) => {
    fetch(`https://api.unsplash.com/search/photos?query=${title}&order_by=popular&client_id=xxx`, headers)
    .then(result => result.json())
    .then(data => {
      var i = getRandomInt(0, data.results.length);
      resolve(data.results[i].urls.small);
    });
  });
}

  getCards (user) {
    var _this =  this;
    fetch(backend+`/getCards/${user.id}`)
    .then(result => result.json())
    .then(items => {
    for (var i = 0; i < items.length; i++) {
      this.getImage(items[i].title).then(function(result) {         //aca items es undefined
          items[i].img = result;
        });
      }
      _this.setState({items});
    });
  }

2 respuestas 2

3

El problema que comentas está aquí entiendo, que dices que items[i].img no lo tienes disponible dentro de ese then de la promesa. Eso es así porque estás pasando la función anónima function(result)... y no tienes el this adecuado dentro.

this.getImage(items[i].title).then(function(result) {         //aca items es undefined
          items[i].img = result;
        });
      }

Prueba o usar la función flecha...

 this.getImage(items[i].title).then((result) => items[i].img = result);

O hacer un bind(this) a tu función anónima.


Este ejemplo sigue tus mismos principios. Como vemos el valor de i es incorrecto. Obtenemos una salida erronea de INDEX.

function arrayAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, 5000);
  })
}

function getArray () {
    return new Promise((resolve, reject) => {
      arrayAsync().then(() => {
        resolve([1,2,3,4,5]);
      });
  });
}

function increaseAsync(value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(++value), 1000);
  });
}

function getInfo() {
  var _this =  this;
  
  getArray()
  .then(items => {
    for (var i = 0; i < items.length; i++) {
      this.increaseAsync(items[i]).then(function(result) {         //aca items es undefined
        console.log("index " + i + "value " + result);
      });
    }
  });
}

getInfo();

Con solo hacer el cambio de var i a let i hacemos que todo funcione correctamente. Por lo tanto no hay necesidad de usar AWAIT y convertir tus llamadas en sincronas.

function arrayAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, 5000);
  })
}

function getArray () {
    return new Promise((resolve, reject) => {
      arrayAsync().then(() => {
        resolve([1,2,3,4,5]);
      });
  });
}

function increaseAsync(value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(++value), 1000);
  });
}

function getInfo() {
  var _this =  this;
  
  getArray()
  .then(items => {
    for (let i = 0; i < items.length; i++) {
      this.increaseAsync(items[i]).then(function(result) {         //aca items es undefined
        console.log("index " + i + "value " + result);
      });
    }
  });
}

getInfo();

0

Cuando se resuelve la promesa, la variable i ya terminó de iterar y tiene el valor items.length, por lo que tratas de asignarle la propiedad img a un elemento que no existe en el array de items.

Una solución sería transformar getCards en una función asíncrona:

async getCards(user) {
    var _this = this,
        items = await fetch(backend + `/getCards/${user.id}`)
        .then(result => result.json());

    for (var i = 0; i < items.length; i++) {
        items[i].img = await _this.getImage(items[i].title);
    }
    _this.setState({
        items
    });
}

Otra opción menos elegante es generar un array vacío items_with_img y un array de promesas, dentro de las cuales se trae la imagen y se asigna al elemento:

var items_wth_img=[],
    promise_array = items.map(function(item) {
       return _this.getImage(item.title).then(function(result) {
          item.img = result;
          items_with_img.push(item);
          return item;
       });
    });
return Promise.all(promise_array).then(function() {
   return _this.setState({items_with_img});
});
2
  • Muchas gracias, me sirvio lo de la funcion asyncronica Commented el 1 feb. 2018 a las 2:37
  • Modificando en el bucle for var por let debe mantener el valor de i dentro de la promesa. Si quieres acceder a items antes de que este todo resuelto, tiene que esperar a las promesas. Como bien apunta @amenadiel
    – F.bernal
    Commented el 1 feb. 2018 a las 13:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.