javascript - Angular 7 中的 HTTP GET 请求返回错误(状态 200)
问题描述
我相信我从 wikimedia API 返回了一个对象,但是不知道如何解析它以显示。
//app.component.ts
import { Component } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Post } from './post';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Wiki Search';
// readonly ROOT_URL = 'https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=japan&origin=*&format=json';
readonly ROOT_URL = 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=Harry Potter&origin=*&callback=JSON_CALLBACK';
// https://en.wikipedia.org/w/api.php?action=query&format=json&gsrlimit=15&generator=search&origin=*&gsrsearch=japan"
posts: Observable<any>;
constructor(private http: HttpClient) {}
getPosts(){
this.posts = this.http.get(this.ROOT_URL)
}
}
//app.component.html
<input type="text" placeholder="Search for pages..">
<button (click)="getPosts()">Get Posts</button>
<div *ngFor="let post of posts | async">
{{ post | json }}
</div>
<ul class=filter-select>
<li class="filter-select-list">
<p class="wiki-page"></p>
</li>
</ul>
如果我将 responseType: text 插入响应处理程序,我可以在开发控制台中将返回的数据作为错误读取。
解决方案
您调用的 URL 以 queryString 参数结尾callback=JSON_CALLBACK
https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=Harry%20Potter&origin=*&callback=JSON_CALLBACK
这是将 JSON 包装在一个名为 JSON_CALLBACK 的回调方法中,该方法不是有效的 JSON,并且不允许解析。我尝试不使用该 queryString 参数,现在响应是一个有效的纯 JSON,您应该能够解析它
https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=Harry%20Potter&origin=*
推荐阅读
- mysql - 使用带有 read_sql_query 的参数的结果不好?
- python-3.x - 在终端上运行 virtualenv 命令时
- android - 单击确认页面中的任何内容并且应用程序崩溃时,将图像上传到 Firebase 失败
- postgresql - 查询有效,但不起作用
- reactjs - 带有嵌套 React 功能组件的 Jest 测试样式组件 - 未创建快照
- json - MariaDB NoSQL 数据使用动态列或 JSON
- android-studio - 当我在 kotlin 中声明进度条 ID 时出现错误
- python - Python - 根据另一个对象列表的计数创建对象列表
- django - 所有路径打开一个页面
- python - 如何使用 pyarrow 递归地列出 HDFS 子文件夹和文件