javascript - 如果仅返回一个对象，则 API 调用不适用于 TypeScript

Question

我有一项任务需要从 API 返回 10 个 Chuck Norris 笑话。这部分我做对了，但第二部分(每 5 秒随机收到一个笑话)让我有点崩溃。

// Get jokes by amount
getJokes(amount) {
const jokeArray = [];
const randomJokeArray = [];
if(amount > 1){
  this.http.get(http://api.icndb.com/jokes/random/' + amount).subscribe(data => {
    // Test to see if call was successful
    if(data["type"] === 'success'){
        for(var i = 0; i <= data["value"].length; i++){
          jokeArray.push(data["value"][i]);
        }
    } else {
      console.warn("API Call 'getJokes' was unsuccessful");
    }
  });
} else {
  this.http.get('http://api.icndb.com/jokes/random/' + amount).subscribe(data => {
    // Test to see if call was successful
    if(data["type"] === 'success'){
      randomJokeArray = data["value"][0];
      console.log(randomJokeArray);
    } else {
      console.warn("API Call 'getJokes' was unsuccessful");
    }
  });
}

    if(amount > 1){
      // Return the jokeArray
      return of (jokeArray);
    } else {
      return of (randomJokeArray);
    }

}

randomJokeArray 返回时总是未定义。

此函数位于服务内部，而我对 TypeScript 和 Angular 还很陌生。我很确定我用错了。谁能告诉我如何从 API 只返回一个笑话？

如果我复制 10 的有效 API 调用，我会在仅调用 1 时返回以下内容。

来自主文件

this.configService.getJokes(1).subscribe(j => this.randomJokeArray = j);

来自服务文件

for(var i = 0; i <= data["value"].length; i++){
    randomJokeArray.push(data["value"][i]);
}

return of (randomJokeArray);

Answer 1

您的代码中存在三个问题

1. 您的组件正在订阅 Subscription 而不是 Observable。所以你应该 map 到 http 返回的响应而不是订阅，因为你希望将 Observable 返回给你的组件。

   this.http.get('http://api.icndb.com/jokes/random/' + amount).pipe(map(data => {
      // Test to see if call was successful
                .........................................
   }));
   

2. 主要问题:您没有等待异步执行完成。

   将您的 if(amount > 1){...} 代码移入 http.get.map()

   return this.http.get('http://api.icndb.com/jokes/random/' + amount).pipe(map(data => {
       // Test to see if call was successful
       if(data["type"] === 'success'){
         randomJokeArray = data["value"][0];
         console.log(randomJokeArray);
       } else {
         console.warn("API Call 'getJokes' was unsuccessful");
       }
   
       if(amount > 1){
           // Return the jokeArray
           return of (jokeArray);
       } else {
           return of (randomJokeArray);
       }
   }));
   

3. 在http.get.map()之前添加return语句

   return this.http.get('http://api.icndb.com/jokes/random/' + amount).pipe(map(data => {
          // Test to see if call was successful
          .........................................
   }));