HttpClient.get 不会从 Wiki API 返回 observable答案

【问题标题】：HttpClient.get does not return observable from Wiki APIHttpClient.get 不会从 Wiki API 返回 observable
【发布时间】：2019-07-05 14:25:11
【问题描述】：

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

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

servicio.service.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>

}
...

home.page.ts

import { ServicioService } from '../servicio.service';
...
constructor(
    navcntrlr: NavController,
    private alertcontroller: AlertController, 
    public servicio: ServicioService) { }

    userInput = 'alcasser';


    ngOnInit(): void {
      this.search();
    }

    search(){
      console.log("henllo xd");
      const hola = this.servicio.goWiki(this.userInput).
      subscribe((response) => {
       console.log(response);
       });
    }
...

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

【问题讨论】：

如果您将错误回调添加到您的订阅方法，您会看到什么？
控制台有什么错误？（包括 cors 警告）
我建议你使用FormControl作为你的用户输入（如果它是一个输入元素）并订阅它，在订阅中然后调用你的this.servicio.goWiki函数并订阅它，你的userInput属性是null 或 undefined 并且服务可能返回 404 或 500。
@RezaRahmati this error 出现。
这只是一个 CORS 错误。使用代理服务器绕过该限制

标签： angular typescript httpclient mediawiki ionic4

【解决方案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);
       });
    }

【讨论】：

我没有添加代码，但 this.userInput 是在代码的其他部分启动的。并出现this error。
试试这个this.http.get('https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch'+ userInput +'&utf8=&format=json&origin=*').subscribe((response) => { 请注意你的goWiki函数中的最后一部分&origin=*。

【解决方案2】：

当我使用他们的 API 时，我也会收到一个 CORS 错误。

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

这是一个快速示例，我使用您的代码并使用 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);
       });
    } 
}

【讨论】：