Angular http get call failling

27 浏览
0 Comments

Angular http get call failling

请查看以下网址：https://stackblitz.com/edit/angular-w4lj6q?file=app%2Fapp.component.ts\n我正在使用http模块，尝试从json文件中获取数据，但是我遇到了以下错误。请有人帮助修复这个问题。\n错误：errors.js:55 ERROR SyntaxError: JSON的位置0处有意外的<标记。

0

2 答案

0 Comments

在Angular中，当我们使用http.get调用接口时，有时候会遇到请求失败的问题。这个问题的出现原因是因为在http请求的header中没有添加正确的content-type，导致返回的数据格式不是json而是HTML。

解决方法是在http请求的header中添加content-type，并将其值设置为json。这样可以确保返回的数据格式是json而不是HTML。

示例代码如下：

import { HttpClient, HttpHeaders } from '@angular/common/http';
// ...
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
};
this.http.get('your_api_url', httpOptions).subscribe(
  (data) => {
    // 处理返回的数据
  },
  (error) => {
    // 处理错误
  }
);

通过以上代码，我们在http请求的header中添加了content-type，并将其值设置为json。这样就可以确保返回的数据格式是json而不是HTML，从而解决了Angular http get调用失败的问题。

0
0 Comments

Angular http get请求失败的原因是以下几点：

1. 包含JSON的文件夹名称错误，应为"apiData"而非"apiDta"。

2. Stackblitz无法返回正确的JSON，而是返回HTML。

解决方法如下：

1. 可以使用"reqres"网站提供的示例JSON。

2. 在"NameListService"中更新URL：

private _url: string = "https://reqres.in/api/users";

3. 在"AppComponent"的"ngOnInit()"方法中更新代码：

this._nameService
    .getNames()
    .subscribe(res => { 
                          this.nameLists = res;
                          console.log(JSON.stringify(this.nameLists));
                      });

经过测试，这些修改可以解决问题。同时，"reqres"网站也是一个不错的发现 🙂

0