如何在Promise中正确使用this？this.http.post出现未定义报错如何解决

问题原因 #

你将doUpload方法直接作为输入属性传给md-editor组件时，方法的执行上下文丢失，this不再指向当前的组件实例，因此挂载在组件实例上的http服务变成了undefined。

解决方案（任选其一即可） #

• 方案1：模板绑定时用箭头函数包裹，保留组件上下文
  修改HTML中的调用代码：

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

• 方案2：将doUpload定义为组件的箭头函数属性，固定this指向
  修改组件中doUpload的定义方式：

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);
  });
}

• 方案3：绑定上下文到方法
  修改HTML中的调用代码，用bind手动绑定当前组件实例作为执行上下文：

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

额外代码优化提示 #

你当前的代码逻辑存在异步时序问题：http.post是异步请求，你在循环发起请求后直接resolve(result)，此时请求还未返回，结果里的URL是硬编码的模拟值，并非接口返回的真实地址。如果需要拿到真实上传地址再返回结果，可以用forkJoin合并所有请求，等全部请求完成后再执行resolve。

内容的提问来源于stack exchange，提问作者cypherduck