javascript - 修复相互依赖的嵌套 promise 的问题

Question

我是 JS 新手，我很难重构我的代码，我知道这不是编写嵌套 promise 的正确方法。我想正确地重构它，但每次尝试都会出错。我很困惑，因为有些调用取决于前一个调用，所以我不确定如何正确构建它

这是我原来的嵌套代码:

this.props.actionHandler.createDivisionList(this.state.divisionQnAListName).then(listData => {
  console.log(listData, "in list creation");
  //createListFields 
  this.props.actionHandler.createListFields(listData.data.Title).then(res=>{
    //addFieldsToView (
    console.log(res, "after list field creation");
    this.props.actionHandler.addFieldsToView(listData.data.Title).then(r => {
      this.props.actionHandler.createSharePointGroup(this.state.divisionName).then(groupInfo => {
        console.log(groupInfo, "in group creation");
        //add users to group 
        this.props.actionHandler.addUsersToSPGroup(groupInfo.data.Title,userwithIds).then(afterAdd => {
          //break list permission
          this.props.actionHandler.breakListPermission(this.state.divisionQnAListName).then(afterBreak => {
            //addGroup to list
            this.props.actionHandler.addGroupToList(this.state.divisionQnAListName,faqAdminGroup[0].Id,fullControlPermission).then(admin => {
              this.props.actionHandler.addGroupToList(this.state.divisionQnAListName,groupInfo.data.Id,contributePermission).then(last => {

                this.props.actionHandler.saveMasterItemtoSPList(this.props.masterListName,formData).then(res => {
                  //if success pass success else pass fail to the container
                  console.log(res, "after saving!");
                  //this.props.onSubmission(res);
                });
              });
            });
          });
        });  
      });
    });
  });
});

这是我的尝试，我尝试将响应分配给一个变量，以传递给需要该数据的其他调用。但我没有定义。

let groupData;

this.props.actionHandler.createDivisionList(this.state.divisionQnAListName)
.then(lst => {
  console.log(lst, "in list creation"); 
  return this.props.actionHandler.createListFields(lst.data.Title)
  .then(()=> this.props.actionHandler.addFieldsToView(lst.data.Title));          
})
.then(() => {
  return this.props.actionHandler.createSharePointGroup(this.state.divisionName)
  .then(grp =>  {
    console.log(grp, "group created");
    groupData = grp;
    return this.props.actionHandler.addUsersToSPGroup(grp.data.Title,userwithIds)
  })
  .then(() =>  this.props.actionHandler.breakListPermission(this.state.divisionQnAListName))
  .then(groupData=> {
    return Promise.all([
      this.props.actionHandler.addGroupToList(this.state.divisionQnAListName,faqAdminGroup[0].Id,fullControlPermission),
      this.props.actionHandler.addGroupToList(this.state.divisionQnAListName,groupData.data.Id,contributePermission)
    ])
    .then(() => this.props.actionHandler.saveMasterItemtoSPList(this.props.masterListName,formData)).then(res => {
      console.log(res, "after saving!");
      return this.props.onSubmission(res);
    })
  })
})

Answer 1

这是最简单的代码版本(没有 console.log)

this.props.actionHandler.createDivisionList(this.state.divisionQnAListName)
.then(listData => this.props.actionHandler.createListFields(listData.data.Title).then(() => listData))
.then(listData => await this.props.actionHandler.addFieldsToView(listData.data.Title))
.then(() => this.props.actionHandler.createSharePointGroup(this.state.divisionName))
.then(groupInfo => this.props.actionHandler.addUsersToSPGroup(groupInfo.data.Title, userwithIds).then(() => groupInfo))
.then(groupInfo => this.props.actionHandler.breakListPermission(this.state.divisionQnAListName).then(() => groupInfo))
.then(groupInfo => this.props.actionHandler.addGroupToList(this.state.divisionQnAListName, faqAdminGroup[0].Id, fullControlPermission).then(() => groupInfo))
.then(groupInfo => this.props.actionHandler.addGroupToList(this.state.divisionQnAListName, groupInfo.data.Id, contributePermission))
.then(() => this.props.actionHandler.saveMasterItemtoSPList(this.props.masterListName, formData))
.then(res2 => console.log(res2, "after saving!"));

通过这段代码，您会注意到我已经丢弃了任何从未使用过的返回值，并链接了所需的变量(这就是为什么 console.log 被删除，因为像 res 这样的变量只是曾经在 console.log 中使用过)

但是 - 这种代码类型是 async/await 的完美用例

async function someFunction() { // this line exists just to drive home 
                                // the point that this works inside an 
                                // async function only
    const listData =    await this.props.actionHandler.createDivisionList(this.state.divisionQnAListName)
    console.log(listData, "in list creation");
    const res =         await this.props.actionHandler.createListFields(listData.data.Title)
    console.log(res, "after list field creation");
    const r =           await this.props.actionHandler.addFieldsToView(listData.data.Title);
    const groupInfo =   await this.props.actionHandler.createSharePointGroup(this.state.divisionName);
    console.log(groupInfo, "in group creation");
    const afterAdd =    await this.props.actionHandler.addUsersToSPGroup(groupInfo.data.Title,userwithIds);
    const afterBreak =  await this.props.actionHandler.breakListPermission(this.state.divisionQnAListName);
    const admin =       await this.props.actionHandler.addGroupToList(this.state.divisionQnAListName,faqAdminGroup[0].Id,fullControlPermission);
    const last =        await this.props.actionHandler.addGroupToList(this.state.divisionQnAListName,groupInfo.data.Id,contributePermission);
    const res2 =        await this.props.actionHandler.saveMasterItemtoSPList(this.props.masterListName,formData);
    console.log(res2, "after saving!");

就是这么平淡又性感，对吧