Question

我决定试用内容丰富的无头CMS，而我遇到了他们的API客户端问题。我要做的是将express表示为服务器端渲染的反应，我使用this repo作为我的起点。

我的快速路由器

创建路线我的反应组件可以调用：

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);
        }
      });
    });
},

从内容中获取数据

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);
    });
}

故障点出现在快递内的getHeroes方法中。因为内容丰富的客户是一个承诺，我不确定如何让getHeroesRoute等待从getHeroes返回。我怎么能这样做？

Answer 1

当promise解析时，您需要调用createHeroesRoute（）传递给getHeroes（）的回调。将getHeroes（）更改为this应该这样做：

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

假设JSON.parse一切正常。

Answer 2

这不是API的问题，您不会在发送响应之前等待解析的承诺。您的代码应如下所示：

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);
    })
  });
}

通过Contentful API将数据从Express发送到React

2 个答案: