Question

功能定义

resetComponent(){
  console.log("1st");
  ...
  this.background = { };
  this.uploadMode = false;
  this.service.getItem(this.watch.appId, true).subscribe((watch) => {
    this.background = { ... };
    console.log("2nd");
  }, ()=> {});
}

我的代码

console.log("before resetComponent()");
resetComponent();
console.log("after resetComponent()");

它不适用于异步操作。

我想看到这样的控制台

before resetComponent()
1st
2nd
after resetComponent()

我不太了解async。

我如何实现我的目标？

Answer 1

一旦您调用 subscribe（），您的代码将继续运行，并且您的订阅将异步运行。

您会想要这样的东西。您将要在此处使用管道而不是订阅。确保返回可观察对象，以便您以后可以订阅。：

resetComponent() {
    console.log("1st");
    this.background = {};
    this.uploadMode = false;
    return this.service.getItem(this.watch.appId, true).pipe((watch) => {
            this.background = { ... };
            console.log("2nd");
        }, () => { });
    }

然后使用订阅调用它。

console.log("before resetComponent()");
resetComponent().subscribe(() => {
     console.log("after resetComponent()");  
});

Answer 2

您可能想观看有关async JavaScript by Traversy Media的视频，以便更好地了解浏览器中的异步性。

从根本上说，这是浏览器保持工作状态的一种方式，而不必等待可能会花费一些时间的内容（例如DOM事件的网络请求或对 setTimeout 方法）。

现在的浏览器是单线程的，因此它们使用称为事件循环的东西来执行异步性。如果您有兴趣了解什么是事件循环，那么可以很好地讨论Event Loops by Philip Roberts here。

现在我们在同一页面上（希望您已观看以上视频：）），您基本上可以从Observable返回一个resetComponent()方法，然后在subscribe内，您可以将 after resetComponent() 登录到控制台。

由于您没有使用resetComponent()方法内部的响应进行任何形式的转换，因此，为了实现此目的，可以使用tap运算符。然后返回Observable。

然后您可以subscribe返回由resetComponent()方法返回的Observable。这就是代码中的样子：

import { Component } from "@angular/core"; import { DataService } from "./data.service"; import { tap } from "rxjs/operators"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { name = "Angular"; background; uploadMode; watch = { appId: "something" }; constructor(private service: DataService) {} ngOnInit() { console.log("before resetComponent()"); this.resetComponent().subscribe(res => console.log("after resetComponent()") ); } resetComponent() { console.log("1st"); this.background = {}; this.uploadMode = false; return this.service.getItem(this.watch.appId, true).pipe( tap(watch => { this.background = { watch }; console.log("2nd"); }) ); } }

这是您推荐的Working Example。

异步使用subscribe（）

2 个答案: