按顺序尝试2个请求(前端、javascript、promise)

Question

我试图让http请求一个上传文件函数“uploadFile(LinkAvatar)”，另一个是使用函数" linkAvatar( id )“将我的上传id链接到我的用户。问题是我需要先完成uploadFile(文件)，因为这个函数给了我id，这样我就可以使用linkAvatar(Id)函数。

我的http-service：

import {CustomHttpClient} from '../../../customHttpClient';
import {inject} from 'aurelia-framework';

@inject(CustomHttpClient)
export class FilesHttpService {

  constructor(http) {
    this.http = http;
  }

  //upload file request
  uploadFile(file) {
    let data = new FormData();
    data.append('file', file);
    data.append('filename', file.name);

    return this.http.post('v1/files', data);
  }

  // linkAvatar request
  linkAvatar(id) {
    return this.http.patch('v1/users/me/video/'+id);
  }
}

我的组件：

import {bindable, customElement} from 'aurelia-framework';
import {inject} from 'aurelia-framework';
import {AuthService} from 'wanderlima/aurelia-auth';
import {CustomHttpClient} from '../../../../customHttpClient';
import {FilesHttpService} from '../../services/files-http-service';
import {UserHttpService} from '../../services/user-http-service';

@inject(AuthService, CustomHttpClient, FilesHttpService, UserHttpService)

@customElement('zm-zoome-yourself')
export class ZmZoomeYourself {

  constructor(auth, http, fileUpload) {
    this.auth = auth.auth.getToken();
    this.http = http;
    this.fileUpload = fileUpload;
    //this.avatarUpload = userfile;
  }

  endRecord(file) {
    let msg = '';
    this.zoomeYourself = file;
    this.stopCount();
    //Is making this request but is not handling the response with .then() it goes to the other func linkAvatar(id) without entering .then
    this.fileUpload.uploadFile(file).then(function(res) {
      //Is entering this block of code only after linkAvatar(id)
      if (res.statusCode === 201) {
        var id = res.content.id;
        msg = 'upload realizado com sucesso!';
      } else {
        msg = 'ocorreu um erro ao enviar o arquivo';
      }
    });
    return this.fileUpload.linkAvatar(id);
  }
}

Answer 1

 this.fileUpload.uploadFile(file).then(function(res) {
      //Is entering this block of code only after linkAvatar(id)
      if (res.statusCode === 201) {
        var id = res.content.id;
        msg = 'upload realizado com sucesso!';
         return id;//we will return id
      } else {
        msg = 'ocorreu um erro ao enviar o arquivo';
throw msg;// we will throw exception
      }
    })
.then(fileUpload.linkAvatar) // if upload is ok, we will pass id to linkAvatar and execute;
.catch(function(error)){
console.log(error);
alert('Unexpected error');
}

尝试在上载完成后像这样重写:将id返回到下一个promise下一个promise，linkAvatar将收到此id并执行您的第二个请求