从内容丰富的CMS使用javascript/react按顺序解析承诺

我试图从一个有内容的CMS中按顺序获取一系列数据，一旦完成，初始化我的React应用程序。我可以说我没有正确地解决这些承诺，并且达到了比赛条件，但我不确定如何解决这个问题

鉴于以下情况：

this.contentfulClient.getEntry('4KGFPDFY2MZrRWCi4hZj2g')
  .then((entry) => {
    //console.log(entry);
    dataStore.siteData = entry.fields;
  })
  .then(() => {
    this.contentfulClient.getEntries({
      content_type: 'visionsData'
    })
      .then((response) => {
        let visionsArr = [];
        response.items.map((vision) => {
          return visionsArr.push(vision.fields);
        });
        dataStore.visionsData = visionsArr;
        console.log('visions');
      })
  })
  .then(() => {
    this.contentfulClient.getEntries({
      content_type: 'inspirationsData'
    })
      .then((response) => {
        //console.log(response.items);
        let inspirationsArr = [];
        response.items.map((inspiration) => {
          return inspirationsArr.push(inspiration.fields);
        });
        dataStore.inspirationsData = inspirationsArr;
        console.log('inspirations');
      })
      .then(() => {
        console.log('data loaded');
        this.setState({
          dataLoaded: true,
        })
      })
  })
  .catch(console.error)

我想确保首先获取条目

4KGF…

然后将其添加到数据存储，然后获取

visionsData

条目，然后将其添加到数据存储，然后获取

inspirationsData

条目，然后将其添加到数据存储，最后将我的应用程序状态设置为

dataLoaded:true

。设置该状态后，我应按如下方式呈现我的应用程序：

render() {
  const { dataLoaded } = this.state;

  if (!dataLoaded) {
    return (<div>LOADING</div>)
  }
  return (
    <Router>
      <div className="App">
        <Route exact path="/" component={Home} />
        <Route exact path="/inspiration" component={Inspiration} />
        <Route exact path="/redesign" component={Redesign} />
        <Route exact path="/visualize" component={Visualize} />
        <Route exact path="/confirmation" component={Confirmation} />
        <Reset />
      </div>
    </Router>
  );
}

render（）{
const{dataLoaded}=this.state；
如果（！dataLoaded）{
退货（装货）
}
返回(
);
}

---

但是发生的情况是，有时数据集的一部分会在其他部分之前呈现，例如（

inspirationsData

），因此

dataLoaded

将被设置为true，即使

visionsData

尚未添加到数据存储中。我知道我可以将每个单独的

getEntries

调用嵌套在前面的

then（（response））

调用中，但这样我就会得到我试图避免的那种金字塔式嵌套承诺结构。如何避免这种情况并正确地构建我的承诺？

当其中的操作是异步的并且希望链按顺序执行时，需要将承诺返回到

then（）

如果没有

返回

，或者当返回不是承诺时，

then（）

会立即解析，而不管在其中调用了什么异步操作

仅开始示例：

this.contentfulClient.getEntry('4KGFPDFY2MZrRWCi4hZj2g')
  .then((entry) => {
    //console.log(entry);
    dataStore.siteData = entry.fields;
  })
  .then(() => {
     return this.contentfulClient.getEntries({
    //^^^^  return promise to next `then()`

---

当链中的操作是异步的并且希望链按顺序执行时，您需要向

then（）

返回一个承诺

如果没有

返回

，或者当返回不是承诺时，

then（）

会立即解析，而不管在其中调用了什么异步操作

仅开始示例：

this.contentfulClient.getEntry('4KGFPDFY2MZrRWCi4hZj2g')
  .then((entry) => {
    //console.log(entry);
    dataStore.siteData = entry.fields;
  })
  .then(() => {
     return this.contentfulClient.getEntries({
    //^^^^  return promise to next `then()`

---

这可以通过包含一个初始调用和三个顺序

的简单承诺链来实现。然后（）

s-无嵌套链。这可以通过包含一个初始调用和三个顺序

的简单承诺链来实现。然后（）

s-无嵌套链。