如何在Angular中从维基百科API的可变pageid JSON数据读取extract字段

嘿，这个问题我之前也碰到过！维基百科API返回的pages结构确实有点反直觉，因为pageid是动态生成的，没法直接用固定的键去访问对应的内容。不过解决起来很简单，下面给你详细的方案和代码示例：

先搞懂API返回的结构 #

首先，你调用的API返回数据大概是这样的：

{
  "query": {
    "pages": {
      "21721040": {
        "pageid": 21721040,
        "ns": 0,
        "title": "Stack Overflow",
        "extract": "Stack Overflow is a question and answer website for professional and enthusiast programmers..."
      }
    }
  }
}

看到没？pages是一个对象，它的键就是那个可变的pageid，所以我们不能硬写response.query.pages.21721040.extract来获取内容。

解决方法：用Object.values()提取页面数据 #

我们可以用JavaScript的Object.values()方法，把pages对象的所有值转换成数组，这样不管pageid是什么，都能直接访问数组里的页面对象。

第一步：修改你的Angular服务 #

在你的维基百科服务里，添加处理逻辑：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class WikipediaService {
  private baseApiUrl = 'https://en.wikipedia.org/w/api.php';

  constructor(private http: HttpClient) { }

  getPageExtract(searchTitle: string): Observable<string> {
    const requestParams = {
      format: 'json',
      action: 'query',
      prop: 'extracts',
      exintro: '',
      explaintext: '',
      titles: searchTitle,
      origin: '*' // 必须加这个参数解决CORS跨域问题！
    };

    return this.http.get<any>(this.baseApiUrl, { params: requestParams }).pipe(
      map(apiResponse => {
        // 将pages对象转换为数组
        const pageArray = Object.values(apiResponse.query.pages) as any[];
        
        // 处理没有结果的情况
        if (pageArray.length === 0) {
          return '未找到相关页面内容';
        }

        const targetPage = pageArray[0];
        // 如果pageid为-1，说明搜索的标题不存在
        if (targetPage.pageid === -1) {
          return `未找到标题为"${searchTitle}"的页面`;
        }

        // 返回提取的文本内容
        return targetPage.extract || '该页面没有简介内容';
      })
    );
  }
}

这里要注意必须加上origin: '*'参数，否则浏览器会因为CORS策略阻止请求，这是维基百科API的要求。

第二步：在组件中调用服务 #

在你的组件里，就可以直接调用这个方法，获取并展示extract内容了：

import { Component } from '@angular/core';
import { WikipediaService } from './wikipedia.service';

@Component({
  selector: 'app-wiki-search',
  template: `
    <div class="search-container">
      <input 
        type="text" 
        [(ngModel)]="searchQuery" 
        placeholder="输入搜索关键词..."
        (keyup.enter)="onSearch()"
      >
      <button (click)="onSearch()">搜索维基百科</button>
    </div>
    <div class="result-container" *ngIf="pageExtract">
      <h3>搜索结果：</h3>
      <p>{{ pageExtract }}</p>
    </div>
  `
})
export class WikiSearchComponent {
  searchQuery = '';
  pageExtract = '';

  constructor(private wikiService: WikipediaService) { }

  onSearch() {
    if (!this.searchQuery.trim()) return;
    
    this.wikiService.getPageExtract(this.searchQuery).subscribe({
      next: (extract) => this.pageExtract = extract,
      error: (err) => console.error('获取数据失败：', err)
    });
  }
}

额外说明 #

• 如果你的搜索可能返回多个页面（比如关键词模糊匹配），可以遍历pageArray来处理每个页面的extract；
• 代码里加了多种异常情况的处理，避免因为没有结果或者页面不存在导致报错；
• 记得在你的Angular模块中导入HttpClientModule，否则HttpClient没法用哦！

内容的提问来源于stack exchange，提问作者Sachin Singh