React Native - Возвращает значение из прослушивателя событий в обещании

Question

Это больше связано с обещаниями и асинхронностью / ожиданием, чем с пакетом, который я использую, но в любом случае пакет реагировать-нативный-фон-загрузка , и у меня возникла проблема с возвратомответ изнутри «завершенного» слушателя события.Я думаю, что мое понимание того, как разрешаются эти обещания, может быть неудачным, но мне нужно вернуть ответ с сервера после завершения загрузки.Файл примера, предоставленный здесь , в основном предназначен для входа в консоль, а не для возврата данных с сервера.

async submit() {
    const responsefromUpload = await this.videoUploader().then((data) => data);
    console.log(responsefromUpload);
}

, из которого я вызываю функцию ниже

videoUploader() {
  const { video } = this.state;
  video.uri = Platform.OS == 'android' ? video.uri.replace('file://', '') : video.uri;
  const options = {
    url: 'https://upload.wistia.com',
    path: video.uri,
    method: 'POST',
    field: 'file',
    type: 'multipart',
  };
  return Upload.startUpload(options).then((uploadId) => {
    console.log('Upload started');
    Upload.addListener('progress', uploadId, (data) => {
      console.log(`Progress: ${data.progress}%`);
    });
    Upload.addListener('error', uploadId, (data) => {
      console.log(`Error: ${data.error}%`);
    });
    Upload.addListener('cancelled', uploadId, (data) => {
      console.log('Cancelled!');
    });
    Upload.addListener('completed', (data) => {
      // data includes responseCode: number and responseBody: Object
      console.log('Completed!');
      return data.resporesponseBody; // this return doesn't work
    });
  }).catch((err) => {
    console.log('Upload error!', err);
  });
}

Любая помощь будет принята с благодарностью.

Answer 1

Вы можете обернуть код блока startUpload .then внутри Promise и разрешить его после завершения загрузки файла.

function videoUploader() {
  const { video } = this.state;
  video.uri = Platform.OS == 'android' ? video.uri.replace('file://', '') : video.uri;
  const options = {
    url: 'https://upload.wistia.com',
    path: video.uri,
    method: 'POST',
    field: 'file',
    type: 'multipart'
  };

  return Upload.startUpload(options).then(uploadId => {
    const uploadCompletionPromise = new Promise(function(resolve, reject) {
      Upload.addListener('progress', uploadId, data => {
        console.log(`Progress: ${data.progress}%`);
      });
      Upload.addListener('error', uploadId, data => {
        console.log(`Error: ${data.error}%`);
      });
      Upload.addListener('cancelled', uploadId, data => {
        console.log('Cancelled!');
      });
      Upload.addListener('completed', data => {
        console.log('Completed!');
        resolve(data.resporesponseBody);
      });

    });
    return uploadCompletionPromise
     .then(response => ({ success: true, data: response }))
     .catch(error => ({ success: false, error }));
  }).catch((error) => {
     console.log('Upload error!', error);
     return { success: false, error } 
  });
}

Answer 2

оберните код в .then((uploadId) => { ... } в «новое обещание» - разрешите обещание в completed обработчике ... resolve(data.resporesponseBody);

т.е.

videoUploader() {
    const {video} = this.state;
    video.uri = Platform.OS == 'android' ? video.uri.replace('file://', '') : video.uri;
    const options = {
        url: 'https://upload.wistia.com',
        path: video.uri,
        method: 'POST',
        field: 'file',
        type: 'multipart',
    };
    return Upload.startUpload(options)
    .then(uploadId => new Promise((resolve, reject) => {
        console.log('Upload started');
        Upload.addListener('progress', uploadId, data => {
            console.log(`Progress: ${data.progress}%`);
        });
        Upload.addListener('error', uploadId, data => {
            console.log(`Error: ${data.error}%`);
            reject(data);
        });
        Upload.addListener('cancelled', uploadId, data => {
            console.log('Cancelled!');
            reject(data); //?
        });
        Upload.addListener('completed', data => {
            // data includes responseCode: number and responseBody: Object
            console.log('Completed!');
            resolve(data.responseBody);
        });
    }))
    .catch(err => {
        console.log('Upload error!', err);
    });
}