Javascript 在Angular中的组件/服务中执行任何函数之前，如何首先加载http数据？

希望你在这个困难的时刻做得很好。相信一切都会好起来的

我试图进行一个本地JSON调用，但是在编译代码之后，我收到的JSON响应是，在下面所有函数的执行结束时。在代码中，我正在调用应用程序组件中的loadService函数。我不想导入head中的JSON文件，而是想使用http服务，因为我必须根据条件进行服务器JSON调用

App.component.ts中的函数调用

this.myservice.loadService（）

输出为：

职能1

职能2

职能3

http响应数据

期望值：

http响应数据

职能1

。。。等等

    import { Injectable } from '@angular/core';
    import { HttpClient, } from '@angular/common/http';
 
    @Injectable({
      providedIn: 'root'
    })
    export class InjectService {
    
        constructor(private http: HttpClient) {
            
          }
         loadService(){
         //logic 
         this.jsoncall()
         }
        
        jsonCall(){
            this.http.get("assets/abc.json").subscribe(data => {
            console.log(data);
            })
        }  
        function1(){
            console.log('function 1');            
            this.function2();
        }
    
        function2(){
            console.log('function 2')!
            this.function3();
        }
    
        function3(){
            console.log('function 3');   
        }
    }

任何帮助都将不胜感激。谢谢。：）

从服务1内部调用函数1，然后它将按行运行

JSON文件是异步获取的。因此依赖语句也需要异步。您可以使用RxJS

tap

操作符导入连续的函数调用。您可以找到有关异步数据的更多信息

如果您正在从组件触发HTTP调用，我假设您也有依赖语句。标准做法是从服务返回可观察内容并在组件中订阅

试试下面的方法

服务

jsonCall（）：可观察的{//this.function（））
);
}

组成部分

ngOnInit() {
  this.injectService.jsonCall().subscribe(
    res => {
      console.log(res);
      // other statements that depend on `res`
    },
    err => {
      // handle error
    }
  );
}

---

函数1的调用情况如何？@RicardoFornes感谢您的评论。您可以假设jsonCall函数。这只是我为理解而创建的一个场景。我在每件事情结束时都得到了回应，这不是我想要的。我希望先获取数据，然后获取所有内容。HTTP调用是异步的。成功解析HTTP请求后，将执行订阅回调函数。在本例中，我假设JSON文件将始终存在，因此您可能不需要涵盖错误/失败场景。如果您需要对HTTP请求失败场景做出反应，则可以添加第二个回调，如下所示：

this.HTTP.get（“assets/abc.JSON”）.subscribe（data=>{console.log（data）；this.function1（）；}，（error）=>{console.log（错误）；}）

@RicardoFornes如何在执行开始时对我可用？首先是数据响应，然后是其他函数执行谢谢你的评论。我尝试过了，但在执行完所有操作后仍然会加载数据。谢谢你的评论@Michael。我可以在其他服务中创建一个可观察对象并订阅吗我想在上面的服务中使用它。这样行吗？在我的应用程序组件中，我只是调用服务函数，这就是我的要求。@jogo：是的，你可以向这个服务注入其他服务并触发调用。但是你不能简单地调用组件中的服务函数。调用是异步的，所以组件中的调用ent也应该是异步的。换句话说，组件应该以某种方式订阅，以保持代码的反应性。请仔细阅读我在答案中包含的SO答案，以了解异步调用是如何工作的。非常感谢。我将检查它。：）

ngOnInit() {
  this.injectService.jsonCall().subscribe(
    res => {
      console.log(res);
      // other statements that depend on `res`
    },
    err => {
      // handle error
    }
  );
}