Question

我正在尝试从特定的Wikipedia页面获取一些文本，但是我无法访问它。我试图了解它是如何工作的，但我不知道为什么它仍然不起作用，因为没有给出错误。

我尝试了几种类似这样的URL：https://www.reddit.com/r/gifs/top/.json?limit=105sort=hot https://gyazo.com/54ee18fe654fcfe2bd5d546b44f85b5d，然后返回。我怀疑它与CORS有关，但不知道它如何工作。

servicio.service.ts代码

firefox.proxy.settings.set({value: config, scope: "regular"}, function() {});

home.page.ts

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class ServicioService {

    constructor(public http: HttpClient) {
        console.log('service working!');
    }

    goWiki(userInput): Observable<any>{
        console.log('goWiki working!');
      //let url = 'https://www.reddit.com/r/gifs/top/.json?limit=105sort=hot';
        return this.http.get('https://es.wikipedia.org/w/api.php?action=query&list=search&srsearch='+ userInput +'&utf8=&format=json',);
    } //took that link from this: <https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&format=json&meta=siteinfo&siprop=magicwords>

}
...

我希望获得一个可观察的json，以便能够使用它并从中获取所需的信息。

Answer 1

您的this.userInput是null。当您转到https://es.wikipedia.org/w/api.php?action=query&list=search&srsearch=&utf8=&format=json（这是它将尝试调用的网址）时，您会看到错误

{"error":{"code":"nosrsearch","info":"The \"srsearch\" parameter must be set.","*":"See https://es.wikipedia.org/w/api.php for API usage. Subscribe to the mediawiki-api-announce mailing list at &lt;https://lists.wikimedia.org/mailman/listinfo/mediawiki-api-announce&gt; for notice of API deprecations and breaking changes."},"servedby":"mw1340"}

尝试在通话前设置this.userInput，然后重试。

    search(){
      console.log("henllo xd");
      this.userInput = 'test'; // THIS SETS USERINPUT TO 'TEST'
      const hola = this.servicio.goWiki(this.userInput).
      subscribe((response) => {
       console.log(response);
       });
    }

Answer 2

当我使用他们的API时，我也会收到CORS ERROR。

我可以在浏览器中访问其API https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=usa&format=jso n

这是我使用您的代码并使用REACTIVE形式将实际值传递给API的简单示例。

import { Component,OnInit } from '@angular/core';
import {FormGroup,FormControl,Validators} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  searchForm:FormGroup;
    constructor(public http: HttpClient) {
        console.log('service working!');
    }

  ngOnInit():void{
    this.searchForm = new FormGroup({
      'searchInput': new FormControl(null),
      });
  }

  onSubmit():void {
    console.log(this.searchForm.value.searchInput);
    this.goWiki(this.searchForm.value.searchInput)
  }

    goWiki(userInput):void{
        console.log('goWiki working!');
        this.http.get('https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch'+ userInput +'&utf8=&format=json').subscribe((response) => {
       console.log(response);
       });
    } 
}

HttpClient.get无法从Wiki API返回可观察到的结果

2 个答案: