Question

出现了这样的问题。

我正在尝试使用一个周期在Wikipedia API中发出一定数量的GET请求。尝试使用功能getAllInfo()

articles.components.ts

export class ArticlesComponent {
  constructor(private articlesServices: ArticlesService) { }

  @Input() allTitles: string[];

  articlesInfo: ArticleInformationNew;
  allArray: [[string, number]] = [['', 0]];

  static getUrlInformation(searchQuery: string) {
    return 'https://ru.wikipedia.org/w/api.php?action=query&titles='
      + searchQuery + '&prop=info&format=json&origin=*';
  }

  getAllInfo() {
    for (const title of this.allTitles) {
      this.articlesServices.getArticleInformation(ArticlesComponent.getUrlInformation(title))
        .subscribe(
          (data: ArticleInformation) => this.articlesInfo = {
            ...data,
            query: { pages: [Object.values(data.query.pages)[0]]}}
        );
        this.allArray.push([this.articlesInfo.query.pages[0].touched, this.articlesInfo.query.pages[0].length]);
    }
  }
}

articles.service.ts

export interface ArticleInformation {
  batchComplete: string;
  query: {
    pages: {
    }
  };
}

export interface ArticleInformationNew {
  batchComplete: string;
  query: {
    pages: any[]
  };
}

export class ArticlesService {
  constructor(private http: HttpClient) { }

  getArticleInformation(url) {
    return this.http.get<ArticleInformation>(url);
  }
}

数组this.allTitles可以由多行组成。例如：this.allTitles = ['Naumen', 'Naumen DMS']

我希望数组this.allArray是二维的，并且包含由行组成的数组，其中每个行都包含每个查询的数据。例如：

this.allArray[0] = ['', 0]
this.allArray[1] = ['2019-02-01T23:27:26Z', 3687]
this.allArray[2] = ['2019-01-21T04:24:21Z', 9704]

但实际上，事实证明，一个二维数组的每个元素是相同的。例如：

this.allArray[0] = ['', 0]
this.allArray[1] = ['2019-02-01T23:27:26Z', 3687]
this.allArray[2] = ['2019-02-01T23:27:26Z', 3687]

为什么以及如何解决？

Answer 1

您可以使用combineLatest：https://www.learnrxjs.io/operators/combination/combinelatest.html

首先，收集要合并的可观察对象（但不订阅它们），然后将其与combineLatest合并，并以array的形式获得响应并对其进行迭代。

getAllInfo() {
    console.log(this.allTitles);

    observablesToSubscribe = [];

    for (const title of this.allTitles) {
      observablesToSubscribe.push(this.articlesServices.getArticleInformation(ArticlesComponent.getUrlInformation(title)));
    }

   combineLatest(observablesToSubscribe).subscribe((responseData: Array<ArticleInformation>) => {
       responseData.forEach((responseDatum) => {
           this.allArray.push({
              ...data,
              query: { pages: [Object.values(data.query.pages)[0]]}
           })
       });   
   });     
}

Answer 2

也许我误解了这个问题，但是您可以通过更正searchQuery（使用标题的替代分隔符）来获得具有特定标题的页面，并摆脱for loop：

getAllInfo() {
  console.log(this.allTitles);

 this.articlesServices.getArticleInformation(
   ArticlesComponent.getUrlInformation(this.allTitles.join('|'))
     .subscribe(
       (res => {
         // here is a result with all pages of particular titles,
         // then you can process your result...
         console.log(res);

         // this.allArray is a multidimensional array
         // [["2019-01-25T00:45:06Z",4508],
         // ["2019-01-26T07:25:08Z", 773]]
         this.allArray = Object.keys(res.query.pages)
           .reduce((acc, val, index) => {
             acc[index] = [pages[val].touched, pages[val].length];
             return acc;
           }, []);
     });
}

在这种情况下，标题的

searchQuery将是Naumen | Naumen DMS（例如，不是Naumen）。 | （管道）是标题的替代分隔符。

要处理结果（res.query.pages）：

const pages = {
  "755288": {
    "pageid": 755288,
    "ns": 0,
    "title": "Spring",
    "contentmodel": "wikitext",
    "pagelanguage": "ru",
    "pagelanguagehtmlcode": "ru",
    "pagelanguagedir": "ltr",
    "touched": "2019-01-26T07:25:08Z",
    "lastrevid": 84434967,
    "length": 773
  },
  "92586": {
    "pageid": 92586,
    "ns": 0,
    "title": "Atom",
    "contentmodel": "wikitext",
    "pagelanguage": "ru",
    "pagelanguagehtmlcode": "ru",
    "pagelanguagedir": "ltr",
    "touched": "2019-01-25T00:45:06Z",
    "lastrevid": 95248014,
    "length": 4508
  },
};
 
const arr = Object.keys(pages).reduce((acc, val, index) => {
  acc[index] = [pages[val].touched, pages[val].length];
  return acc;
}, []);

console.log(arr);

Answer 3

尝试一下

getAllInfo() {
    for (const title of this.allTitles) {
      this.articlesServices.getArticleInformation(ArticlesComponent.getUrlInformation(title))
        .subscribe(
          (data: ArticleInformation) => {
            this.articlesInfo = {
                ...data,
                query: { pages: [Object.values(data.query.pages)[0]]}
            }
            this.allArray.push([this.articlesInfo.query.pages[0].touched,this.articlesInfo.query.pages[0].length]);
          } 
        );

    }
  }

使用循环获取请求

3 个答案: