🌟 Promise then方法全景式通关指南

📚 Promise快速回顾

javascript 复制代码

// 就像点外卖 🍔
const orderFood = new Promise((resolve, reject) => {
  // 厨房制作中...
  setTimeout(() => {
    const success = Math.random() > 0.3;
    success ? resolve("🍔+🍟套餐") : reject("厨师手滑了！");
  }, 2000);
});

✨ then()基础四要素

1. 基本用法

javascript 复制代码

orderFood
  .then(meal => {
    console.log(`收到：${meal}`); // 成功时执行
    return "擦桌子"; // 可以返回新值
  })
  .catch(err => {
    console.log(`投诉：${err}`); // 失败时执行
  });

2. 链式调用奥秘

javascript 复制代码

// 就像生产线流水线 🚂
orderFood
  .then(meal => {
    console.log(`打开包装：${meal}`);
    return "吃完的包装盒";
  })
  .then(trash => {
    console.log(`分类丢弃：${trash}`);
    return new Promise(resolve => setTimeout(() => resolve("收拾完毕"), 1000));
  })
  .then(finalResult => {
    console.log(finalResult); // 1秒后输出
  });

3. 错误处理大全

javascript 复制代码

// 方式1：catch统一捕获
orderFood
  .then(meal => { /*...*/ })
  .catch(err => console.log(`错误日志：${err}`));

// 方式2：then的第二个参数
orderFood.then(
  meal => { /*...*/ }, 
  err => console.log(`立即处理：${err}`)
);

// ⚠️ 两种方式的区别：
// catch会捕获前面所有then的错误
// 第二个参数只处理当前Promise的失败

4. 返回值类型详解

javascript 复制代码

// 返回值类型决定下一个then接收什么
.then(value => {
  // 情况1：返回普通值
  return "普通字符串"; // 下个then收到字符串
  
  // 情况2：返回Promise
  return new Promise(resolve => {
    setTimeout(() => resolve("新的Promise结果"), 1000);
  }); // 下个then等待1秒后收到结果
  
  // 情况3：不返回
  // 下个then收到undefined
});

🔧 实用技巧宝典

1. 快速创建Promise

javascript 复制代码

// 成功快捷方式
Promise.resolve("立即成功").then(console.log); 

// 失败快捷方式
Promise.reject("立即失败").catch(console.error);

2. 同步异步转换

javascript 复制代码

function syncToAsync() {
  return Promise.resolve().then(() => {
    console.log('这个代码会在微任务队列执行');
    return '转换完成';
  });
}

3. 多个Promise协作

javascript 复制代码

// 等待所有完成
Promise.all([promise1, promise2])
  .then(results => console.log(results));

// 竞速模式
Promise.race([request1, request2])
  .then(firstResult => {/*...*/});

💥 常见坑点预警

javascript 复制代码

// 错误示例❌
somePromise
  .then(result => {
    new Promise(resolve => setTimeout(resolve, 1000)); // 忘记return！
  })
  .then(() => {
    // 这里会立即执行，不会等待！
  });

// 正确姿势✅
somePromise
  .then(result => {
    return new Promise(resolve => setTimeout(resolve, 1000)); // 记得return！
  });

🎯 最佳实践

始终返回：每个then回调都return值/Promise
错误早处理：在链式末尾统一catch
命名Promise ：变量名如userPromise增强可读性
异步转同步：用async/await+then效果更佳

🔮 实战演练

javascript 复制代码

// 模拟用户登录流程
function login(username) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      username ? resolve({ id: 123, name: username }) : reject("用户名无效");
    }, 500);
  });
}

login("前端小王子")
  .then(user => {
    console.log(`欢迎回来，${user.name}！`);
    return fetch(`/api/profile/${user.id}`); // 假设返回Promise
  })
  .then(profile => {
    console.log("加载个人资料完成:", profile);
    return "流程全部完成 ✅";
  })
  .catch(err => {
    console.error("流程出错:", err);
    return "系统维护中 ⚠️";
  })
  .then(finalMessage => {
    console.log(finalMessage);
  });

🌈 总结

then()就像连接Promise的管道工 🔧：

接收前一个Promise的结果
处理数据（可以同步/异步）
传递处理后的结果给下一个环节

记住这个流程图：
Promise -> then -> then -> catch -> finally

现在就去控制台试试这些代码吧！遇到问题推荐MDN的Promise文档！