前端竞态问题

竞态问题：多个异步请求事件同时执行且对同一变量做读写操作，导致数据不一致。 最近在使用Promise.all时遇到这个问题记录下，代码如下：

const getUserData = async (id) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`User data with id: ${id}`);
    }, 1000);
  });
};

const checkUserExists = async (id, userData) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userData === 'User data with id: 1') {
        resolve(true);
      } else {
        reject(new Error('User not found'));
      }
    }, 2000);
  });
};

async function createUser() {
  try {
    const userId = 1;
    const [userData, exists] = await Promise.all([
      getUserData(userId),
      checkUserExists(userId, userData),
    ]);

    if (exists) {
      console.log('User created successfully');
    } else {
      throw new Error('User creation failed');
    }
  } catch (error) {
    console.error(error);
  }
}

createUser();

后来改用async/await执行：

async function createUser() {
  try {
    const userId = 1;
    const userData = await getUserData(userId);
    const exists = await checkUserExists(userId, userData);

    if (exists) {
      console.log('User created successfully');
    } else {
      throw new Error('User creation failed');
    }
  } catch (error) {
    console.error(error);
  }
}

createUser();