Angular 同步运行http服务

我将从以下代码中得到一些响应：

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

得到结果后，我需要运行以下代码：

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

---

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

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

评论中有人建议使用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(// ...)

---

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

评论中有人建议使用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(// ...)

---

您还可以将您的可观察对象转换为函数并使用

---

您还可以将您的可观察对象转换为函数并使用

最简单的可能是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关键字基本上使函数体的行为与它的synchronous类似。 它总是会回报你一个承诺，所以你可能需要等待一些事情

希望这是有意义的。

最简单的方法可能是异步/等待，如果不进入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关键字基本上使函数体的行为与它的synchronous类似。 它总是会回报你一个承诺，所以你可能需要等待一些事情

---

希望这是有意义的。

如果我正确理解了这个问题，很明显，您需要在第一个post响应useradd之后发布第二个请求user

由于http.post返回一个可观测值，因此您可以将第一个可观测值链接到第二个可观测值，而不是直接订阅它。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之前，不会触发第一个请求。如果我理解正确，很明显，您需要在第一个post response useradd之后发布第二个请求user

由于http.post返回一个可观测值，因此您可以将第一个可观测值链接到第二个可观测值，而不是直接订阅它。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之前，不会触发第一个请求。您需要查看RxJS操作符（在本例中为flatMap或switchMap），以便在第一个请求完成后启动第二个请求。感谢您的响应。我需要运行第二个呼叫多次。可能吗？是的，但是根据你需要的行为，不同的方法是最合适的。因此建议您对RxJS中的可用内容进行更多研究，以便更好地理解这些方法。我需要多次运行第二次调用。呼叫之间的数据是否发生变化？如果没有，请查看.share或.replay。您需要查看RxJS操作符，在本例中为flatMap或switchMap，以便在第一个请求完成后启动第二个请求。感谢您的回复。我需要运行第二个呼叫多次。可能吗？是的，但是根据你需要的行为，不同的方法是最合适的。因此建议您对RxJS中的可用内容进行更多研究，以便更好地理解这些方法。我需要多次运行第二次调用。呼叫之间的数据是否发生变化？如果没有，请查看.share或.replay。我会选择switchMap而不是flatMap作为经验法则，用于只发射一次或以可预测方式发射的观测值。是的，对于这个示例，switchMap似乎更好。编辑答案以使用switchMap。Thanks我会选择switchMap而不是flatMap作为经验法则，对于只发射一次或以可预测的方式发射的观测值。是的，在这个例子中，switchMap似乎更好。编辑答案以使用switchMap。谢谢