Both validateColor() and addColor() create Promise objects, but they are unrelated. If addColor() is changed to return the Promise from validateColor(), your code works as you expect:

    var colors = ["RED", "GREEN", "YELLOW"];
    
    const getColor = async () => {
      var value = "";
      colors.forEach((color) => {
        value = value + color + " ";
      });
      return value;
    };
    
    
    const middleware = async () => {
      addColor(null)
        .then(() => {
          getColor().then((result) => {
            console.log(result);
          });
        })
        .catch((err) => {
          console.log(err.message + " at  middleware");
        });
    };
    
    const addColor = async (color) => {
      return validateColor(color)
        .then(() => {
          console.log("Adding data");
          colors.push(color);
        })
        .catch((err) => {
          console.log(err.message + " at add color");
          throw err;
        });
    };
    
    const validateColor = async (color) => {
      if (color == null) {
        throw new Error("Color cannot be empty");
      }
    };
    
    middleware();

Your async functions result in the return value being wrapped in a Promise. Thus both validateColor() and addColor() will, unless you do something about it, create separate individual Promise objects that have nothing to do with each other. On the other hand, if addColor returns the Promise that validateColor() returns, then there will not be a separate new Promise created; the same Promise is passed back to middleware(). That Promise has the pending exception thrown in validateColor(), so the .catch() will be called.

In one liner I would say, you need to add return promise for each async function here is correct code.

var colors = ["RED", "GREEN", "YELLOW"];

const getColor = async () => {
  var value = "";
  colors.forEach((color) => {
    value = value + color + " ";
  });
  return Promise.resolve(value);
};


const middleware = async () => {
  return addColor(null) 
    .then(() => {
      getColor().then((result) => {
        console.log(result);
      });
    })
    .catch((err) => {
      console.log(err.message + " at  middleware");
    });
};

const addColor = async (color) => {
  return validateColor(color)
    .then(() => {
      console.log("Adding data");
      colors.push(color);
    })
    .catch((err) => {
      console.log(err.message + " at add color");
      throw err;
    });
};

const validateColor = async (color) => {
  if (color == null) {
    throw new Error("Color cannot be empty");
  }
  Promise.resolve(true)
};

middleware();

Explanation:

Basically, the async function can be used with await, or in another word, you can say if you want to use await with any function then the function must be async that actually means the function should return a promise, then only can await statement can be justified.

Example:

Consider I’m calling a function “test()” and “await test()” so the difference between those two is in the first case (“test()”) it will call test function and if there are any blocking operations then it will continue with executing statements below “test()” statement. While in case of “await test()” if there is a blocking operation then it will wait for them to complete and not execute the further statements until the test function is completed (here completed means the function will return a promise and it will wait until the promise is resolved or rejected)

So here none of the async function returns a promise so by default as the function execution get over it consider it as resolved and because of that the problem is raised.

Detailed explanation with respect to this example.

The first “middleware()” function gets called. From that “addColor()” function get called

addColor():
if the promise return from this function get resolved then it will call “getColor()” function
Else it will just print an error message.

So it will first go to addColor function inside that function we are calling validateColor() function

validateColor():
If the promised return from this function is get resolved then we are adding the color to the array.
Else we print an error and throw it.

And validate color function throws an error because the color is null, but when it will come to else part of validate function (which is called from the addColor function) addColor function is already considered the execution is done successfully.