0

Estou fazendo um código que faz duas requisições, o valor retornardo é o tamanho de uma arquivo content-length, mas preciso que a função que contem essas duas requisições retorne o valor depois que as requisições finalizarem (Sim, elas demoram um pouco). Porém não estou sabendo lidar com essa espera de requisições.

Sendo mais detalhado, quando chamo a função: addItem o função saveFiles será chamada, dentro deste função será chamada mais duas funções (as vezes apenas uma dependendo do tipo de mídia) _getImage e _getVideo, essas duas funções irão fazer o download da mídia e salvar no celular e retornar o tamanho do arquivo. Pórem dentro de saveFiles as funções estão retornando antes mesmo de terminarem, assim não tenho o valor de size quando necessito.

Tentei usar o async e o await, mas não obtive sucesso, mesmo assim minhas funções não estão esperando. Existe alguma forma de esperar uma promessa terminar para depois executar o promisso passo?

import RNFetchBlob from 'rn-fetch-blob';

export default class Manager {
  constructor(maxSize) {
    this.maxSize = maxSize;
    this.listOfFiles = [];
    this.dirs = RNFetchBlob.fs.dirs;
  }

  addItem(item, media) {
    size = this.saveFiles(item);
    console.log(size);
    this.listOfFiles.push({
      inFeed: false,
      media: media,
    })
  }

  seeFiles() {
    for(i = 0 ; i < this.listOfFiles.length; i++) {
      console.log(this.listOfFiles[i])
    }
  }

  saveFiles(item) {
    var sizeImage = 0;
    var sizeVideo = 0;

    if(item.type == 'Animated') {
      sizeVideo = this._getVideo(item.images.image460svwm.url);
      sizeImage = this._getImage(item.images.image460.url);
    } else {
      sizeImage = this._getImage(item.images.image460.url);
    }

    return sizeImage + sizeVideo;
  }

  async _getImage(url) {
    var filename = url.substring(url.lastIndexOf('/')+1);
    return await RNFetchBlob.config({
      // add this option that makes response data to be stored as a file,
      // this is much more performant.
      fileCache : true,
      path : this.dirs.DocumentDir + '/media/' + filename
    })
    .fetch('GET', url, {
      //some headers ..
    })
    .then((res) => {
      console.log(res.respInfo.headers['content-length'])
      return res.respInfo.headers['content-length']
    })
  }

  async _getVideo(url) {
    var filename = url.substring(url.lastIndexOf('/')+1);
    return await RNFetchBlob.config({
      // add this option that makes response data to be stored as a file,
      // this is much more performant.
      fileCache : true,
      path : this.dirs.DocumentDir + '/media/' + filename
    })
    .fetch('GET', url, {
      //some headers ..
    })
    .then((res) => {
      console.log(res.respInfo.headers['content-length'])
      return res.respInfo.headers['content-length']
    })
  }
}

2 Respostas 2

1

Você deve ter em mente que tanto _getImage quanto _getVideo são funções que retornam Promises. Logo, você deve aguardar a sua resolução a partir da função saveFiles. Como você deseja esperar que as duas promessas se resolvam, o meio mais simples de se fazer isso é usar Promise.all, que aguarda a resolução de todas as Promises passadas.

Assim:

saveFiles(item) {
  // Inicializamos o `array` com as funções que desejamos que sejam executadas.
  const promises = [this._getImage(item.images.image460.url)];

  // Se o item for do `type` `'Animated'`, adicionamos mais um item à lista:
  if (item.type === 'Animated') {
    promises.push(this._getVideo(item.images.image460svwm.url));
  }

  // Aguardamos que todas as `Promise`s  sejam executadas:
  return Promise.all(promises).then(([sizeImage, sizeVideo]) => {
    return sizeImage + (sizeVideo || 0);
  });
}

A vantagem de usar o Promise.all é que ele executa todas as Promises em paralelo, logo, o resultado será quase duas vezes mais rápido, já que uma não depende da outra. :)

Note que o método saveFiles ainda irá retornar uma Promise, logo, para obter o resultado, use o then. Você provavelmente irá querer fazer isso no componentDidMount:

componentDidMount() {
  //              ↓↓↓↓
  saveFiles(item).then((sumOfSizes) => {
    this.setState({ sumOfSizes })
  })
}

Você pode ainda combinar o async/await com o Promise.all, ficando com:

async saveFiles(item) {
  // Inicializamos o `array` com as funções que desejamos que sejam executadas.
  const promises = [this._getImage(item.images.image460.url)];

  // Se o item for do `type` `'Animated'`, adicionamos mais um item à lista:
  if (item.type === 'Animated') {
    promises.push(this._getVideo(item.images.image460svwm.url));
  }

  // Aguardamos que todas as `Promise`s  sejam executadas:
  const [sizeImage, sizeVideo] = await Promise.all(promises);

  // Retornamos a soma:
  return sizeImage + (sizeVideo || 0);
}

async componentDidMount() {
  const sumOfSizes = await saveFiles(item);
  this.setState({ sumOfSizes });
}
1
  • É importante salientar que: Se qualquer uma das promessas passadas for rejeitada, a Promise.all rejeita assincronamente com o valor da promessa que foi rejeitado Commented 21/06/2019 às 12:46
0

o único jeito de esperar um Promise é usando o async/await se os teus métodos _getVideo e _getImage retornam uma Promise basta no seu método saveFiles fazer:

async saveFiles(item) {
    var sizeImage = 0;
    var sizeVideo = 0;

    if(item.type == 'Animated') {
        sizeVideo = await this._getVideo(item.images.image460svwm.url);
        sizeImage = await this._getImage(item.images.image460.url);
    } else {
        sizeImage = await this._getImage(item.images.image460.url);
    }

    return sizeImage + sizeVideo;
}

Eu também daria uma dica a você, para começar a usar let ou const ao invés de var: https://medium.com/collabcode/javascript-e-suas-vari%C3%A1veis-var-let-e-const-b035b44c2dab

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 .