0

我决定尝试 contentful 的无头 CMS，但我遇到了他们的 API 客户端的问题。我想要做的是将 express 与服务器端渲染的 react 结合起来，我使用这个 repo作为我的起点。

我的高速路由器

创建一个我的 React 组件可以调用的路由：

createApiRouter(app) {
    const router = express.Router();

    this.createHeroesRoute(router);
    // this.createDetailedBillRoute(router);        
    return router;
},

createHeroesRoute(router) {
    router.get('/get-heroes', (req, res) => {
      this.getHeroes((err, data) => {
        if(!err) {
          res.json(data);                                    
        } else {
          res.status(500).send(err);
        }
      });
    });
},

从 Contentful 获取数据

getHeroes(callback) {
    contentfulClient.getEntries({content_type: 'sectionHeroes'})
      .then((entries) => {
        //serilizations is a custom data serializer to format this data, it's working fine
        return JSON.parse(serializations.serializeMainSection(entries.items[0]))
      })
      .catch((error) => error );
}

我的反应组件

请求数据

static requestData(params, domain = '') {
    return axios.get(`${domain}/api/get-heroes`);
}

将组件的状态设置为接收到的数据

componentDidMount() {
    this.constructor.requestData().then((response) => {
      this.setState(response.data);
    }).catch((err) => {
      throw new Error(err);
    });
}

故障点发生在getHeroesexpress 内部的方法中。因为 contentful 的客户是一个承诺，我不确定如何getHeroesRoute等待来自getHeroes. 我怎样才能做到这一点？

4

2 回答 2

0

这不是 API 的问题，在发送响应之前，您无需等待 promise 解决。您的代码应如下所示：

getHeroes() {
  return contentfulClient.getEntries({content_type: 'sectionHeroes'})
    .then((entries) => {
      //serilizations is a custom data serializer to format this data, it's working fine
      return JSON.parse(serializations.serializeMainSection(entries.items[0]))
    })
}

并在您的快速路由器中：

createApiRouter(app) {
  const router = express.Router();

  this.createHeroesRoute(router);
  // this.createDetailedBillRoute(router);        
  return router;
},

createHeroesRoute(router) {
  router.get('/get-heroes', (req, res) => {
    this.getHeroes().then((data) => {
      res.json(data);
    }).catch((err) => {
       res.status(500).send(err);
    })
  });
}
于 2016-11-10T14:05:27.463 回答
0

当 promise 解决时，您需要调用 createHeroesRoute() 传递给 getHeroes() 的回调。将 getHeroes() 更改为此应该可以：

getHeroes(callback) {
    contentfulClient.getEntries({content_type: 'sectionHeroes'})
        .then((entries) => {
            callback(JSON.parse(serializations.serializeMainSection(entries.items[0])));
        })
       .catch((error) => error );
}

假设 JSON.parse 一切正常。

于 2016-08-11T22:27:26.837 回答