修复相互依赖的嵌套承诺中的问题

时间:2018-10-03 05:38:13

标签: javascript promise es6-promise

我是JS的新手,我很难重构代码,我知道这不是编写嵌套承诺的正确方法。我想正确地重构它,但是每次尝试都出错。我有些困惑,因为有些电话依赖于前一个电话,所以我不确定如何正确构建它

这是我原来的嵌套代码:

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

2 个答案:

答案 0 :(得分:2)

这是您代码的最简单版本(不包括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 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!");

那是如此的平坦和性感,对

答案 1 :(得分:0)

我认为这是您想要的,但是在每种情况下,您都需要返回下一个所需的适当数据。试试吧,我希望它能正常工作:

this.props.actionHandler.createDivisionList(this.state.divisionQnAListName)
                  .then(listData => {
                      console.log(listData, "in list creation");
                      //createListFields 
                      this.props.actionHandler.createListFields(listData.data.Title);
                    return <some_data>;
                  })
                  .then(res=>{
                      //addFieldsToView (
                    console.log(res, "after list field creation");
                      this.props.actionHandler.addFieldsToView(listData.data.Title);
                    return <some_data>;
                  })
                  .then(r => {
                      this.props.actionHandler.createSharePointGroup(this.state.divisionName)
                    return <some_data>;
                  })
                  .then(groupInfo => {
                    console.log(groupInfo, "in group creation");
                      //add users to group 
                      this.props.actionHandler.addUsersToSPGroup(groupInfo.data.Title,userwithIds)
                    return <some_data>;
                  })
                  .then(afterAdd => {
                      //break list permission
                      this.props.actionHandler.breakListPermission(this.state.divisionQnAListName)
                    return <some_data>;
                  })
                  .then(afterBreak => {
                      //addGroup to list
                      this.props.actionHandler.addGroupToList(this.state.divisionQnAListName,faqAdminGroup[0].Id,fullControlPermission)
                    return <some_data>;
                  })
                  .then(admin => {
                      this.props.actionHandler.addGroupToList(this.state.divisionQnAListName,groupInfo.data.Id,contributePermission)
                    return <some_data>;
                  })
                  .then(last => {
                      this.props.actionHandler.saveMasterItemtoSPList(this.props.masterListName,formData)
                    return <some_data>;
                   })
                  .then(res => {
                      //if success pass success else pass fail to the container
                    console.log(res, "after saving!");
                      //this.props.onSubmission(res);
                  })
                  .catch(err => {
                      //while error 
                });