- 首先要确保 API 地址正确无误,可以尝试在浏览器中直接访问该 API 地址来检查是否能够获取到响应数据。
- 如果 API 地址无误,那么可能是跨域问题(详见 Angular 官网关于跨域的文档)。此时需要在后端服务中设置 CORS(跨域资源共享)规则,允许前端应用程序的域名访问 API 数据。
- 如果仍然无法获取响应数据,则需要检查网络连接是否正常,以及是否存在语法错误和调用错误等与代码相关的问题。
以下是一个获取 Github API 数据的例子,其中包含了右侧代码区的完整示例代码:
import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
@Component({
selector: 'app-github-users',
template: `
Github Users
`,
})
export class GithubUsersComponent {
users: any[];
constructor(private http: HttpClient) {}
ngOnInit() {
this.http.get('https://api.github.com/users').subscribe((data: any[]) => {
this.users = data;
console.log(this.users);
});
}
}