Question

我有一个Angular应用程序，我想将文件上传到内容服务器（CS）服务。由于这个服务的构建方式，我还需要构建最终上传文件的文件夹。

所以，例如，如果我想将我的文件上传到/ base / 1/2/3，我将检查是否在CS中创建了/ base / 1/2/3;如果没有，我会继续检查/ base / 1/2，/ base / 1和/ base。如果只创建了/ base，那么我将创建/ base / 1，然后是/ base / 1/2，然后是/ base / 1/2/3然后我将上传我的文件。

我正在尝试使用Observables并递归地执行此操作，但我无法使其工作。我知道运算符扩展为递归，但我认为这不是我需要的。

我有plunkr我正在模拟带有延迟的http调用（1000）。如果路径存在，则递归检查，但是当我开始构建路径时，只有第一个工作，然后什么也没有。

这是我的代码，一个基本组件

@Component({
  selector: 'my-app',
  template: `
    <div>
      <button (click)="build()">BUILD!</button>
    </div>
  `
})
export class AppComponent { 

  constructor(private service: AppService) {}

  build() {
    this.service
      .build('base', ['1', '2', '3'])
      .subscribe(data => console.log('done!'));
  }

}

这是服务

@Injectable()
export class AppService {

  constructor() {}

  build(name: string, path: string[]): Observable<any> {
    return this.buildRec(name, path || []);
  }

  buildRec(name: string, path: string[], folder: string): Observable<any> {
    const fullpath = !path.length ? name : `${name}/${path.join('/')}`;

    return this.getBasePath(fullpath)
      .flatMap(data => {
        console.log(`found ${fullpath} with id ${data}`);
        return this.createFolder(folder, data);
      })
      .catch(err => {
        const newFolder = path.pop()
        console.log(`not found ${fullpath}`);
        return this.buildRec(name, path, newFolder)
          flatMap(data => {
            return this.createFolder(folder, data);
          });
      });
  }

  getBasePath(path: string): Observable<any> {
    return path === 'base' ? Observable.of('1').delay(1000) : Observable.throw('error').delay(1000);
  }

  createFolder(folder: string, id: string): Observable<any> {
    console.log(`creating folder ${folder}`);
    return Observable
      .of(folder)
      //.map(res => console.log(`created ${res}`)
      .delay(1000);
  }
}

输出应该是这样的：

未找到基数/ 1/2/3 找不到基地/ 1/2 找不到基地/ 1 找到id为1的基地创建文件夹1 创建文件夹2 创建文件夹3 完成了！

但在creating folder 1后，它会转到done!

有谁知道如何让它发挥作用？此致

使用Angular中的Observable进行递归调用

0 个答案: