如何在从先前调用的方法获得响应后调用方法
How to call method after getting response from previously called method
我正在尝试将文件数组保存到 spring 启动服务器。一次保存一个文件。我正在使用 for 循环迭代文件数组并请求保存每个文件。在这里,我希望仅在获得第一个文件的响应后才进行下一次调用。我已经尝试了下面给出的代码,但我无法实现它。
Component.ts
public uploadNewsFiles() {
for (let index = 0; index < this.files.length; index++) {
debugger;
var body = new FormData();
// alert(this.files[index].name);
body.append('file', this.files[index]);
this.uploading.push(true);
this.uload(body,this.newsId,this.getFileDescriptionFormGroup(index)
.controls['des'].value,index).then((status:any)=>
{
if (status.status === 'success') {
// alert('success');
body.delete('file');
this.uploading[index] = false;
this.uploadingStatus.push(true);
} else {
body.delete('file');
this.uploading[index] = false;
this.uploadingStatus.push(false);
}
},(err)=>alert('failed'))
}
// body.append('newsId',this.newsId);
}
async uload(body,newsId,desc,index) {
return await this.service.saveFiles(body, newsId,desc).toPromise();
}
service.ts
public saveFiles(body,newsId,des) {
return this.http.post(this.url + '/saveFiles?
newsId='+newsId+'&fileDescription='+des,body);
}
你可以使用 async
await
.
async uploadNewsFiles() {
for (let index = 0; index < this.files.length; index++) {
var body = new FormData();
body.append('file', this.files[index]);
this.uploading.push(true);
await this.uload(body,this.newsId,this.getFileDescriptionFormGroup(index)
.controls['des'].value,index).then((status:any)=>
{
if (status.status === 'success') {
body.delete('file');
this.uploading[index] = false;
this.uploadingStatus.push(true);
// here we are calling the
} else {
body.delete('file');
this.uploading[index] = false;
this.uploadingStatus.push(false);
}
},(err)=>alert('failed'))
}
}
uload(body,newsId,desc,index) {
return new Promise((resolve, reject) => {
this.service.saveFiles(body, newsId,desc).toPromise().then(resp => {
resolve(resp); // here we are resolving our promise
});
});
}
服务
public saveFiles(body,newsId,des) {
return this.http.post(this.url + '/saveFiles?
newsId='+newsId+'&fileDescription='+des,body);
}
希望对你有所帮助。
由于您使用的是 Angular 我们可以利用 rxjs
库而不是使用 toPromise
并从 http 调用链接可观察对象,例如:
function modUploadFiles() {
this.files
.map((file, index) => {
const body = new FormData();
body.append("file", file);
const newsId = this.newsId;
const desc = this.getFileDescriptionFormGroup(index).controls["des"]
.value;
return this.service.saveFiles(body, newsId, desc).finally(status => {
body.delete("file");
this.uploading[index] = false;
this.uploadingStatus.push(status.status === "success");
})
})
.reduce((acc, next) => acc.flatMap(() => next))
.subscribe(result => {/*Do something*/});
}
您可以在以下问题中查看更多信息:
我正在尝试将文件数组保存到 spring 启动服务器。一次保存一个文件。我正在使用 for 循环迭代文件数组并请求保存每个文件。在这里,我希望仅在获得第一个文件的响应后才进行下一次调用。我已经尝试了下面给出的代码,但我无法实现它。
Component.ts
public uploadNewsFiles() {
for (let index = 0; index < this.files.length; index++) {
debugger;
var body = new FormData();
// alert(this.files[index].name);
body.append('file', this.files[index]);
this.uploading.push(true);
this.uload(body,this.newsId,this.getFileDescriptionFormGroup(index)
.controls['des'].value,index).then((status:any)=>
{
if (status.status === 'success') {
// alert('success');
body.delete('file');
this.uploading[index] = false;
this.uploadingStatus.push(true);
} else {
body.delete('file');
this.uploading[index] = false;
this.uploadingStatus.push(false);
}
},(err)=>alert('failed'))
}
// body.append('newsId',this.newsId);
}
async uload(body,newsId,desc,index) {
return await this.service.saveFiles(body, newsId,desc).toPromise();
}
service.ts
public saveFiles(body,newsId,des) {
return this.http.post(this.url + '/saveFiles?
newsId='+newsId+'&fileDescription='+des,body);
}
你可以使用 async
await
.
async uploadNewsFiles() {
for (let index = 0; index < this.files.length; index++) {
var body = new FormData();
body.append('file', this.files[index]);
this.uploading.push(true);
await this.uload(body,this.newsId,this.getFileDescriptionFormGroup(index)
.controls['des'].value,index).then((status:any)=>
{
if (status.status === 'success') {
body.delete('file');
this.uploading[index] = false;
this.uploadingStatus.push(true);
// here we are calling the
} else {
body.delete('file');
this.uploading[index] = false;
this.uploadingStatus.push(false);
}
},(err)=>alert('failed'))
}
}
uload(body,newsId,desc,index) {
return new Promise((resolve, reject) => {
this.service.saveFiles(body, newsId,desc).toPromise().then(resp => {
resolve(resp); // here we are resolving our promise
});
});
}
服务
public saveFiles(body,newsId,des) {
return this.http.post(this.url + '/saveFiles?
newsId='+newsId+'&fileDescription='+des,body);
}
希望对你有所帮助。
由于您使用的是 Angular 我们可以利用 rxjs
库而不是使用 toPromise
并从 http 调用链接可观察对象,例如:
function modUploadFiles() {
this.files
.map((file, index) => {
const body = new FormData();
body.append("file", file);
const newsId = this.newsId;
const desc = this.getFileDescriptionFormGroup(index).controls["des"]
.value;
return this.service.saveFiles(body, newsId, desc).finally(status => {
body.delete("file");
this.uploading[index] = false;
this.uploadingStatus.push(status.status === "success");
})
})
.reduce((acc, next) => acc.flatMap(() => next))
.subscribe(result => {/*Do something*/});
}
您可以在以下问题中查看更多信息: