同步运行http服务

Question

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

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

我需要同步运行此代码。如何让它同步？现在，辅助代码不等待主代码。

Answer 1

最简单的可能是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()。

希望有道理。

Answer 2

如果我正确理解了这个问题，很明显你需要在第一次回复后发布第二个请求（用户）（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));

请注意，在combineRequest上调用subscribe之前，不会触发第一个请求

Answer 3

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

评论中的某些人建议使用flatMap或switchMap，但它看起来不像第二个请求将使用第一个请求返回的值。如果是这种情况，一个简单的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(// ...)

Answer 4

您还可以将您的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)
        }
    )
}