同步运行http服务

时间:2018-04-17 12:32:09

标签: angular angular-httpclient

我将从以下代码中得到一些回复:

this.http.post("http://localhost/angular5/user-add.php", this.myform.value, {responseType: 'json'}).subscribe(
            data => {
                console.log(data)
            }
        )

获得结果后,我需要运行以下代码:

this.http.post("http://localhost/angular5/user.php", formData).subscribe(
            imageData => {
                console.log(imageData)
            }
        )

我需要同步运行此代码。如何让它同步?现在,辅助代码没有等待主代码。

4 个答案:

答案 0 :(得分:2)

最简单的可能是async / await,没有进入Rx领域(你可能不想深入研究)。

async doSomething() {
   const req1 = await this.http.post("http://localhost/angular5/user-add.php", this.myform.value, {responseType: 'json'}).pipe(first()).toPromise();

   const req2 = await this.http.post("http://localhost/angular5/user.php", formData).pipe(first()).toPromise();

   console.log(req1, req2);
}

async关键字基本上使得函数体的行为与其同步一样。 它将始终返回一个承诺,因此您可能需要await doSomething()

希望这是有道理的。

答案 1 :(得分:1)

如果我正确理解了这个问题,很明显你需要在第一次回复后发布第二个请求(用户)(useradd)

由于http.post返回一个observable,而不是直接订阅它,你可以将第一个observable链接到第二个observable并订阅它。 switchMap(或flatMap)似乎是你需要的运算符。

这样的事情:

import { switchMap } from 'rxjs/operators';

const firstRequest = this.http.post("http://localhost/angular5/user-add.php", this.myform.value, {responseType: 'json'});

const secondRequest = switchMap( data => {
    console.log(data); //First request data. Chain it to second request.
    return this.http.post("http://localhost/angular5/user.php", formData);
});

const combinedRequest = secondRequest(firstRequest);

combinedRequest.subscribe(imageData => console.log(imageData));

请注意,在您在combinedRequest

上调用subscribe之前,第一个请求不会被触发

答案 2 :(得分:0)

您无法使异步代码同步。你可以做的是延迟执行第二个请求,直到第一个请求返回。

评论中的某些人建议使用flatMapswitchMap,但它看起来不像第二个请求将使用第一个请求返回的值。如果是这种情况,则应使用简单的concat

import { concat } from 'rxjs/observable';

const addUser$ = this.http.post(
    "http://localhost/angular5/user-add.php", 
    formValue, 
    {responseType: 'json'}
);

const postUser$ = this.http.post("http://localhost/angular5/user.php", formData);

// addUser$ will execute first, than postUser$
concat(addUser$, postUser$)
  .subscribe(// ...)

答案 3 :(得分:0)

您还可以将observable转换为函数并使用async/await

async yourMethod()
{
    //first call
    let data = await this.http.post("http://localhost/angular5/user-add.php", this.myform.value, {responseType: 'json'}).toPromise();
    console.log(data);

    //2nd call - executes after the first one
    this.http.post("http://localhost/angular5/user.php", formData).subscribe(
        imageData => {
            console.log(imageData)
        }
    )
}