jQuery 函数返回承诺

Question

I have an object (a Floor Area for reference) that belongs to a Category, the Category belongs to a Type. When adding a new object the user can choose an existing, or new, Type and Category. If the Category and/or Type don't exist a new one should be created.

For the UI I have two dropdown lists, Type and Categories, as well as the properties for the object. These dropdowns can also have new entries added (using select2). When selecting an existing Type, the Categories dropdown repopulates with the Categories for that Type.

If an existing Type is selected we should use the existing typeId from the dropdown list. If it's a new type we make a request to create a new Type and return the new typeId. Then we do the same for Categories. The categoryId is then used to create a new object.

I know in essence what I need to do to achieve this. In practice I'm struggling a bit with how to format the functions and promises in what they will return. I can get it working if both Type and Category already exist (code below). And with some changes, get it working if both Type and Category don't exist, but not both. I know it's something to do with the way I'm structuring my return types as functions.

typeIdGet should return either the existing or new typeId, instead it returns an Id if it is existing, but a getJSON function if it doesn't.

categoryIdGet should do the same but take the previously returned typeId if a new Category is required.

How do I structure the two typeIdGet functions to return an Id in either case?

How do I structure the two categoryIdGet functions to take the returned typeId from the previous function and return an Id in either case?

<script>
// ... click event handler and some code to get the selected Type and Category ...

// code below handles the promises

var myTypeId, myCategoryId;

if (existingType) { // existing type, return the selected Id
    typeIdGet = $.when(Number(selectedTypeId)); // this is a promise that resolves immediately
} else { // new Type we need to create one and get the new Id
    typeIdGet = $.getJSON(
        "Dimensions/Create?handler=NewType",
        {
            floorAreaTypeName: selectedTypeOption.text()
        },
        function (response) { // returns new Id
            return Number(JSON.parse(response));
        }
    );
}

if (existingCategory) {
    categoryIdGet = $.when(Number(selectedCategoryId));
} else {
    categoryIdGet = $.getJSON(
        "Dimensions/Create?handler=NewCategory",
        {
            floorAreaTypeId: myTypeId, // this should be passed in
            floorAreaCategoryName: selectedCategoryOption.text()
        },
        function (response) { // returns new Id
            return Number(JSON.parse(response));
        }
    );
}

typeIdGet.then(function (typeId) {
    myTypeId = typeId;
    return categoryIdGet; // Can we not pass in the typeId here?
}).then(function (categoryId) {
    myCategoryId = categoryId;
    alert("myTypeId: " + myTypeId + " myCategoryId:" + myCategoryId);
    // Create new floor area here with the categoryId
}).fail("Something went wrong");

</script>

Answer 1

The problem is that (as hinted at in your later comment), they two $.getJSON commands are running in parallel, because you didn't do anything to wait for the first one to finish before running the second one.

The easiest way to make that happen is to wrap them in functions (and make the functions always return a promise to make them easier to deal with:

function typeIdGet() {
  if ( existingType ) return Promise.resolve( Number( selectedTypeId ) );
  return new Promise( function( resolve, reject ) {
    $.getJSON( `Dimensions/Create?handler=NewType`, {
      floorAreaTypeName : selectedTypeOption.text(),
    }, function( response ) {
      resolve( Number( JSON.parse( response ) ) );
    }
  } );
}

function categoryIdGet( typeId ) {
  if ( existingCategory ) return Promise.resolve( Number( selectedCategoryId ) );
  return new Promise( function( resolve, reject ) {
    $.getJSON( 'Dimensions/Create?handler=NewCategory', {
      floorAreaTypeId : typeId.
      floorAreaCategoryName : selectedCategoryOption.text(),
    }, function( response ) {
      resolve( Number( JSON.parse( response ) ) );
    } );
  } );
}

Now, with that you can run them in the order you want:

typeIdGet().then( function( typeId ) {
  return categoryIdGet( typeId ).then( function( categoryId ) {
    console.log( "typeId:", typeId, "categoryId:", categoryId );
  } );
} );