JavaScript异步链中如何让最后一个then返回包含处理结果的Promise？

嘿，我瞅了下你写的代码，问题主要出在Promise链式调用的返回衔接和结果传递上，我给你一步步调整和解释哈：

首先先把能跑通、正确返回结果的代码改好：

function Base64() {
  // Generate base64 of the image
  let reader = new FileReader();
  reader.readAsDataURL(imaginary.file());
  return new Promise((resolve, reject) => {
    reader.onload = () => resolve(reader.result); // 这里要把读取到的base64结果resolve出去
    reader.onerror = () => reject(reader.error); // 别忘了处理错误情况
  });
}

function ImageObject(base64) {
  // 这里假设是把base64转成Image对象的逻辑
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = base64;
  });
}

function Resize(img) {
  // 这里是你的图片缩放逻辑，返回缩放后的结果
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = img.width / 2;
  canvas.height = img.height / 2;
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  return canvas.toDataURL();
}

const Main = function() {
  return Base64()
    .then(function(i) {
      return ImageObject(i); // 必须返回这个Promise，链式才能衔接上
    })
    .then(function(i) {
      const x = Resize(i);
      return x; // then里return的值会自动包装成新的Promise的resolve结果
    });
};

// 调用的时候就能拿到最终的结果了
Main().then(function(x) {
  console.log(x); // 这里就能打印出Resize处理后的结果啦
}).catch(err => {
  console.error('处理出错：', err);
});

然后给你拆解关键的几个点：

• Base64函数：必须在FileReader加载完成时，用resolve(reader.result)把读取到的base64结果传递出去，同时加上错误处理，避免链式调用吞掉错误；
• 链式调用的衔接：第一个then里调用ImageObject(i)之后，一定要return它，因为ImageObject返回的是Promise，这样下一个then才能接收到处理好的Image对象；
• 最后一步返回结果：在处理Resize的then里，你只需要return x就行——Promise的then方法本身会自动把你return的值包装成一个已resolve的新Promise，这样Main函数最终返回的Promise，在调用时就能通过.then(x => ...)拿到结果；
• Main函数本身：要记得return整个Promise链，这样外部调用Main()时才能拿到这个链式的最终Promise。

另外补充个小建议：现在用async/await写异步代码会更简洁，逻辑更清晰，比如上面的Main函数可以改成：

async function Main() {
  const base64 = await Base64();
  const imgObj = await ImageObject(base64);
  const resizedResult = Resize(imgObj);
  return resizedResult; // async函数会自动把返回值包装成Promise
}

// 调用方式和之前一样
Main().then(console.log).catch(console.error);

这样是不是比链式then好读多啦？

内容来源于stack exchange