如何在 Promise 中使用“this”？

Question

我正在尝试在 Promise 函数中发出 http 请求。 我得到this.http.post 是undefined error... 我知道我必须以某种方式访问​​this，但我不明白该怎么做。

有人愿意帮助我吗？

doUpload(files: Array<File>): Promise<Array<UploadResult>> {
    console.log(files);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        let result: Array<UploadResult> = [];
        for (let file of files) {
          this.http
            .post(this.APIURL + "/image/upload/markdown", file)
            .subscribe((data) => {
              console.log(data);
            });
          result.push({
            name: file.name,
            url: `https://avatars3.githubusercontent.com/${file.name}`,
            isImg: file.type.indexOf("image") !== -1,
          });
        }
        resolve(result);
      }, 3000);
    });
  }

错误：

> TypeError: undefined is not an object (evaluating 'this.http.post')  
> (anonyme Funktion) — sensor-edit.component.ts:308  
> onInvokeTask — core.js:39680  
> runTask — zone-evergreen.js:168  
> invokeTask — zone-evergreen.js:465  
> timer — zone-evergreen.js:2650

构造函数：

constructor(
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private api: ApiService,
    private _routerService: Router,
    private errorService: ErrorModalService,
    private sanitizer: DomSanitizer,
    private http: HttpClient
  ) {}

doUpload 在我的 Html 中是这样调用的：

<div class="container well come-space">
          <md-editor formControlName="markdown" name="Content" [height]="'400px'" [upload]="doUpload">
          </md-editor>
</div>

Answer 1

TBH，我看不到将 Observable 转换为 Promise 的用途。事实上，目前您正在创建多个可以保持打开状态的订阅。相反，我会使用 RxJS forkJoin 在单个订阅中并行触发多个可观察对象。

试试下面的

import { forkJoin, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

doUpload(files: Array<File>): Observable<Array<UploadResult>> {
  return forkJoin(                                  // <-- RxJS `forkJoin` function
    files.map((file: any) =>                        // <-- `Array#map` function
      this.http.post(
        this.APIURL + "/image/upload/markdown", 
        file
      ).pipe(
        map((data: any) => ({                       // <-- RxJS `map` operator
          name: file.name,
          url: `https://avatars3.githubusercontent.com/${file.name}`,
          isImg: file.type.indexOf("image") !== -1,
        }))
      )
    )
  );
}

那你就可以订阅了

this.doUpload(files).subscribe({
  next: (response) => console.log(response),
  error: (error) => console.log(error)
});

更新

正如 cmets 所述，我的解决方案不能与 <md-editor> 的 @Input() upload 变量结合使用。使用您自己的 doUpload() 实现和以下 sn-p 组件的构造函数。

constructor() {
  this.doUpload = this.doUpload.bind(this);
}

取自ngx-markdown-editor's docs。