CODEWITHSUNDEEP
javascriptreactjsasynchronousasync-await
ReactiveMike
ReactiveMike

Reputation: 3

Prevent code from being executed after forEach

I am currently trying to achieve a simple CRUD operation in ReactJS + ExpressJS. I have an async onSubmit method that handles form submitting.

The foreach loop below should contain some array element checks and if the anonymous function returns false, the application should exit the onSubmit, but the try-catch block manages to get executed before the foreach finishes.

Since I don't have anything to really await in my foreach loop, is there a way to "await" until it fully finishes and the execute code that is inside the try-catch block while keeping the onSubmit method asynchronous?

    onSubmit = async (e) => {
        e.preventDefault();

        if (something) {
                return false;
        }

        // This foreach gets executed after the try-catch below, but I want it to execute first
        someArr.forEach(item => {
            if (item.arr === undefined || item.arr.length == 0) {
                return false;
            }
        });

        try {
            // This has some await axios.post() calls...
        } catch { }
    }

Upvotes: 0

Views: 256

Answers (3)

antonku
antonku

Reputation: 7665

return statement inside the forEach callback does not prevent try catch evaluation because that return statement is inside the callback, so it returns from the callback instead of the outer onSubmit function.

If I understand correctly the intention is to return from onSubmit if any item in the array meets the condition: (item.arr === undefined || item.arr.length == 0)

If that's correct, you can rewrite it using Array.prototype.some:

onSubmit = async (e) => {
  e.preventDefault();

  if (something) {
    return false;
  }

  const shouldReturn = someArr.some(item => item.arr === undefined || item.arr.length === 0);

  if (shouldReturn) {
    return;
  }

  try {
    // This has some await axios.post() calls...
  } catch { }
}

Upvotes: 2

Dov Rine
Dov Rine

Reputation: 840

The forEach loop is already synchronous. Here's a modification of your method that demonstrates this:

onSubmit = async () => {
    const someArr = []
    for(let i=0; i<100; i++){
        someArr.push(i);
    }

    someArr.forEach((item) => {
        console.log(`forEach: ${item}`);

    });

    try {
        console.log(`try block`);

    } catch { }
}

onSubmit();

Upvotes: 1

Albin w&#228;rme
Albin w&#228;rme

Reputation: 261

I don't see any reason to why you should not be able to perform all of the logic inside of the try-catch block give this a try.

onSubmit = async (e) => {
    e.preventDefault();

    if (something) {
            return false;
    }

    try {
        let should_call = true;
        someArr.forEach(item => {
          if (item.arr === undefined || item.arr.length == 0) {
            should_call false;
          }
        });

        if(should_call){
           // Call has some await axios.post() calls...
        }

    } catch { }
}

Upvotes: 1

Related Questions