проблемы с исправлением вложенных обещаний, которые зависят друг от друга

Question

Я новичок в 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);
    })
  })
})

Answer 1

Я думаю, это то, что вы ищете, но в каждом случае вам нужно возвращать соответствующие данные, которые требуются для следующего.Попробуйте, я надеюсь, что он работает нормально:

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

Answer 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 / 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!");

это так плоско и сексуально, правда