2016-09-08 6 views
0

私はファイルfunc "uploadFile(file)"をアップロードするためにhttpリクエストを1つ作成しようとしていますが、もう1つはこのfunc " linkAvatar(id) "問題は、私はlinkAvatar(id)funcを使うことができるように、funcが私にIDを与えるので、uploadFile(ファイル)が最初に終了する必要があるということです。2つのリクエストを順番に試しています(フロントエンド、javascript、約束)

私のhttp-サービス:

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

歯の咬合はこれを解消するのに役立ちます。 – Bergi

+0

'this.fileUpload.linkAvatar(id)'を 'this.fileUpload.uploadFile(file).then(...)'コールバックの中に移動できますか? – homam

答えて

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

アップロードがfinishidした後、この のように書き換えてみてください - 次の約束 次の約束、linkAvatarに戻りID、このIDを受け取って2回目のリクエストを実行します

+0

generealでは、アップロード後にクライアントがインターネットに接続できなくなった場合どうなりますか?ファイルは保存されますがリンクされません。ユーザーがファイルを再アップロードすると、複製されますか?また、APIバージョンv1とのリンクもあります。リクエストインターセプタでAPIバージョンを追加できます。 – zxxc

関連する問題