Promise.then()执行顺序异常：服务器创建用户前触发回调的问题

嘿，我完全懂你的困惑——按道理Promise的then应该等异步操作完成才执行，但你的alert提前弹了，大概率是你的createUser函数没正确把服务器的创建操作包裹进Promise里，导致Promise提前resolve了。

最常见的错误原因 #

你可能犯了这两个错误之一：

• createUser根本没返回一个真正等待服务器操作的Promise
• 你在函数里手动创建了Promise，但没在服务器操作完成时才调用resolve

举个典型的错误示例：

function createUser(newUser) {
  // 这里发起了服务器请求，但用的是回调，没和Promise关联
  fetch('/api/users', { method: 'POST', body: JSON.stringify(newUser) })
    .then(res => res.json());
  
  // 错误：直接返回了一个立刻resolve的Promise
  return Promise.resolve();
}

这种情况下，createUser返回的Promise会马上完成，then里的alert自然就先弹了，完全不等服务器的请求结束。

正确的写法 #

你需要确保createUser返回的Promise是和服务器操作绑定的：

情况1：用本身支持Promise的库（比如axios、fetch）

这些库的请求方法本身就返回Promise，直接返回它就行：

function createUser(newUser) {
  // 直接返回fetch的Promise，它会在请求成功后才resolve
  return fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(newUser)
  }).then(res => res.json());
}

情况2：手动包裹回调式的API

如果你的服务器操作是老式的回调风格（比如某些数据库驱动），要把它放进Promise的执行器里，在操作完成时调用resolve/reject：

function createUser(newUser) {
  return new Promise((resolve, reject) => {
    // 假设这是你的服务器/数据库回调式API
    server.createUser(newUser, (error, createdUser) => {
      if (error) {
        reject(error); // 操作失败时拒绝Promise
      } else {
        resolve(createdUser); // 操作成功完成后才resolve
      }
    });
  });
}

验证方法 #

调用的时候，确保你是链式调用正确的Promise：

createUser({ name: '新用户' })
  .then(() => {
    // 现在这个alert只会在服务器创建完成后弹出
    alert('用户创建完成！');
    // 这里再去获取并展示所有用户
    return fetch('/api/users');
  })
  .then(res => res.json())
  .then(users => {
    console.log('所有用户：', users);
    // 把用户渲染到页面上
  })
  .catch(err => console.error('出错了：', err));

这样修改后，then里的代码就会严格等待服务器的创建操作完成后才执行，alert就不会提前弹出来啦。

内容的提问来源于stack exchange，提问作者Ole EH Dufour