Обещания в магазине mobx

Question

Я не уверен, как реализовать обещания в моем магазине mobx. У меня есть два действия, которые я хотел бы выполнить последовательно в цикле и не забудьте дождаться завершения первого, прежде чем запускать второй. Вот пример моего кода магазина. Пожалуйста, запросите дополнительные разъяснения, и я обязательно добавлю их. Я попытался упростить код до того, что, по моему мнению, было необходимо для поиска решения. Благодаря!

import { observable, action } from 'mobx'; 

import Store from '../support/store'; 

class Upload extends Store { 
    @observable fileList = null; // array of files to be uploaded 
    @observable processedFile = null; // single file pre-processed for upload 

    @action processFile(file) { 
    // takes file from fileList array, 'processes' it and 
    // places the result in this.processedFile 
    } 

    @action post() { 
    // makes a POST request, uploading this.processedFile 
    // sets this.processedFile = null 
    } 

    @action postFileList() { 
    // loops over the array this.fileList 
    // runs this.processFile(file) 
    // waits until processFile(file) is finished 
    // runs post() 
    // waits until post() is finished 
    // removes file from the this.fileList array 
    } 
} 

Answer 1

Если вы делаете что-то асинхронное в действии, вам необходимо убедиться в wrap the asynchronously called function in an action as well.

Вы можете сделать рекурсивный postFileList, который выйдет, когда файлов больше нет в fileList.

Пример

class Upload extends Store { 
    @observable fileList = []; 
    @observable processedFile = null; 

    @action processFile(file) { 
    return new Promise(resolve => { 
     const file = this.fileList[0]; 
     setTimeout(action(() => { 
     this.processedFile = file.processed; 
     resolve(); 
     }), 1000); 
    }); 
    } 

    @action post() { 
    return new Promise(resolve => { 
     const file = this.processedFile; 
     setTimeout(action(() => { 
     this.processedFile = null; 
     resolve(); 
     }), 1000); 
    }); 
    } 

    @action postFileList() { 
    if (this.fileList.length === 0) { 
     return; 
    } 
    this.processFile() 
     .then(() => this.post()) 
     .then(action(() => { 
     this.fileList.shift(); 
     this.postFileList(); 
     })); 
    } 
}