Question

我正在调用一个API，它会在页面中返回结果，而我正试图找到一个优雅的＆＃39;检索它们的方法。

理想情况下，我想像这样消费它们：

let results = api.get();

for await (const page of results) {
    // do stuff with page
}

我可以使用像这样的生成器函数来接近它：

class Results {
    constructor(url, token) {
        this.url = url;
        this.token = token;
    }

    async *page() {
        let url = this.url;

        while (true) {
            const response = await fetch(url, {
                headers: { 'Authorization': 'Bearer ' + this.token }
            });

            const data = await response.json();

            yield data.values;

            if (!data.next) return;
            url = data.next;
       }
    }
}

并称之为：

for await (const page of results.page()) {
    // do stuff with page
}

我曾尝试使用像这样的[Symbol.iterator]，但无法让它工作：

[Symbol.iterator]() {
    let that = this;

    return {
        next: async function() {

            if (!that.page) {
                that.page = that.url;
                return {done: true};
            }

            const response = await fetch(that.page, {
                headers: { 'Authorization': 'Bearer ' + that.token }
            });

            const data = await response.json();

            that.page = data.data.next;

            return {
                value: data,
                done: false
            }
        }
    }
}

这个问题是我需要从当前页面获取下一页的链接，以确定是否有下一页，但作为一个承诺，我无法在该函数中访问它。

如何让迭代器工作？

Answer 1

以下建议是一个有效的功能。 [Symbol.asyncIterator]发挥了重要作用。感谢：

[Symbol.asyncIterator]() {
    let that = this;

    return {
      page: that.url,
      token: that.token,
      next: async function() {

        if (!this.page) {
            this.page = that.url;
            return {done: true};
        }

        const response = await fetch(this.page, {
            headers: { 'Authorization': 'Bearer ' + this.token }
        });

        const data = await response.json();

        this.page = data.next;

        return {
          value: data,
          done: false
        }
    }
}

现在它的理想工作我只是希望能够遍历所有结果而不知道页面，所以这里有一个解决方案的工作解决方案：

[Symbol.asyncIterator]() {
    let that = this;

    return {
      page: that.url,
      token: that.token,
      values: [],
      next: async function() {

        if (!this.page && this.values.length === 0) {
            this.page = that.url;
            return {done: true};
        }

        if (this.values.length > 0) {
            return {
                value: this.values.pop(),
                done: false
            }
        }

        const response = await fetch(this.page, {
            headers: { 'Authorization': 'Bearer ' + this.token }
        });

        const data = await response.json();
        this.page = data.next;
        this.values = data.values;

        if (this.values.length === 0) {
            return { done: true }
        }

        return {
          value: this.values.pop(),
          done: false
        }
    }
}

使用异步生成器函数可以简化此代码，如下所示：

async *[Symbol.asyncIterator]() {
    let url = this.url;

    const getPage = url =>
       fetch(url, this.header)
           .then(response => response.json())
           .then(data => ({
               next: data.next,
               values: data.values
           }));

    while(url) {
        const page = await getPage(url);

        for (const value of page.values) {
            yield value;
        }

        url = page.next;
    }
}

所以全班看起来像这样：

class Response {
    constructor(url, token) {
        this.url = url;
        this.header = {
            headers: {
                Authorization: `Bearer ${token}`
            }
        };
    }

    async* [Symbol.asyncIterator]() {
        let url = this.url;

        const getPage = url =>
            fetch(url, this.header)
                .then(response => response.json())
                .then(data => ({
                    next: data.next,
                    values: data.values
                }));

        while (url) {
            const page = await getPage(url);

            for (const value of page.values) {
                yield value;
            }

            url = page.next;
        }
    }
}

这使您可以轻松遍历分页API结果，如下所示：

for await (const item of response) {
    ...
}

异步迭代API结果

1 个答案: