Как сделать машинописный текст синхронным? - PullRequest
Новая
       15

Как сделать машинописный текст синхронным?

1 голос
/ 24 апреля 2019

Я пытался реализовать функцию загрузки изображений, и у меня есть следующий класс. 

class myClass {
  oriData: any;
  name: string;

  constructor(props) {
    this.name = props.name;
    this.oriData = this.readFile(props);
  }

  async readFile(props) {
    return await new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.readAsDataURL(props);
      reader.onload = () => {
        let result = reader.result;
        resolve(result);
      };
      reader.onerror = reject;
    });
  }
}

private async process(file): Promise<myClass> {
  try {
    let image = await new myClass(file);
    console.log(image.oriData);
    console.log(image.name);
    return Promise.resolve(image);
  }
  catch(err) {
    console.log(err);
  }
}

Однако, когда я пытаюсь получить image.oriData и image.name, image.oriData отображается как Undefined, но другой является правильным. Я проверяю этот шаг и обнаруживаю, что процесс (файл) все еще будет создавать экземпляр myClass, не дожидаясь, пока read.onload завершит работу. Я считаю, что это должно быть проблемой синхронизации. Может ли кто-нибудь помочь мне улучшить этот код? Спасибо!

1 Ответ

1 голос
/ 25 апреля 2019

Вы можете вернуть буквально все, что угодно из конструктора JavaScript, так что это возможный шаблон: 

class DontDoThis {
  constructor(props) {
    this.name = props.name;
    const results = this.readFile(props);
    // As a side-effect of the promise completing, set a field
    results.then(data => this.oriData = data);

    // Force this constructor to be treated as async
    // even though we cannot say `async constructor`
    return results.then(() => this, () => this);
  }
}

async function process(...) {
  const complexData = await new DontDoThis(...);
}

Тем не менее, далеко, далеко лучше просто иметь функцию, которая создает окончательное значение: 

interface ImageData { name: string, oriData: any };
// This can also be a static method, e. g. `ImageData.create(...)`
async function ComplexData(props): Promise<ImageData> {
  return readFile(props).then(data => ({name: props.name, oriData: data}));
}

async function process(props) {
  const complexData = await ComplexData(props);
}

ImageData может быть классом вместо интерфейса - главное отметить, что он не может быть создан частично - либо ComplexData завершится успешно и создаст объект ImageData, либо произойдет сбой, и вы не получите один на всех. У вас никогда не бывает небезопасного в использовании, потому что он наполовину инициализирован ImageData объекта, лежащего вокруг.

...