如何在客户端立即显示扫描的网站 url 数组？答案

【问题标题】：how can I show the scanned url array of the site instantly on the client side?如何在客户端立即显示扫描的网站 url 数组？
【发布时间】：2020-11-27 16:17:05
【问题描述】：

我正在使用 apollo 服务器扫描站点的站点地图。但是当我从操场发送请求时，它会在不等待函数完成的情况下给出结果。我怎样才能保持扫描结果？以及如何在客户端立即显示扫描的站点 url 数组？

如果我使用graphql订阅，我需要将数据一一保存。这将是很多数据。

注意：系统正在运行，数据正在保存在 mongoose 中。

scanSitemap: async (parent, { id, data }, { WebLink }) => {

    let dataset = [];

    const generator = await SitemapGenerator('https://example.org', {
      stripQuerystring: false,
      filepath: null
    });

    generator.start();

    generator.on('add', (url) => {
      dataset.push(url);
      console.log(dataset);
    });

    generator.on('done', () => {
      return new WebLink({
        status: 1, domain: 'test', websiteId: id, urls: dataset
      }).save();
    });

  },

【问题讨论】：

标签： node.js graphql apollo-server

【解决方案1】：

在这种情况下，您的scanSitemap 解析器需要返回一个Promise，它仅在'done' 事件从SitemapGenerator 发出时才解析

为什么？好吧，根据 ApolloServer Docs：

解析器通常执行异步操作，例如从数据库或后端 API 中获取数据。为了支持这一点，解析器可以返回一个可以解析为任何其他支持的返回类型的承诺。 (https://www.apollographql.com/docs/apollo-server/data/resolvers/#return-values)

在这种情况下，您的解析器肯定在执行异步操作——站点地图抓取——因此这是使用 Promises 的好情况。

通过返回 Promise，您指示 Apollo Server 等待异步操作的结果可用。根据您的代码，我相信您最终想解决这个问题：

new WebLink({
  status: 1, domain: 'test', websiteId: id, urls: dataset
}).save()

我已经重写了你的代码以使用 Promises（我也测试了它，它可以工作！）

scanSitemap: async (parent, { id, data }, { WebLink }) => {
  // Returning a new promise inside of the GraphQL resolver
  // that accepts a callback with a resolve argument that we'll use later
  return new Promise((resolve) => {
    let dataset = [];

    // No need to await SitemapGenerator
    const generator = SitemapGenerator('https://example.org', {
      filepath: null,
      stripQuerystring: false,
    });

    generator.start();

    generator.on('add', (url) => {
      dataset.push(url);
      console.log(dataset);
    });

    generator.on('done', () => {
      // Resolving the promise
      // and telling ApolloServer that our GraphQL resolver result is ready
      resolve(
        new WebLink({
          domain: 'test',
          status: 1,
          urls: dataset,
          websiteId: id,
        }).save(),
      );
    });
  });
};

如果您对 Promise 感兴趣，这里有一个很好的资源：

https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke

【讨论】：