Node.js Express自定义API返回随机猫咪图片时报错如何解决？

错误原因 #

• fetch是异步API，调用后返回的是 Promise对象，不是直接返回请求得到的图片数据，你直接将Promise实例传入Buffer.from，触发了类型不匹配报错。

解决方案 #

方案1：流式返回图片（推荐，内存占用低） #

直接将CDN返回的图片响应流转发给客户端，无需手动处理Buffer，性能更好：

// Node.js 18以下版本无内置fetch，需先执行npm i node-fetch@2安装依赖，再在文件顶部引入
// const fetch = require('node-fetch');

app.get("/media/funnycats", async (req, res, next) => {
  try {
    const fileIndex = Math.floor(Math.random() * catarray.length);
    const fileUrl = catarray[fileIndex];
    // 等待fetch请求拿到响应
    const response = await fetch(fileUrl);
    if (!response.ok) throw new Error('图片资源请求失败');
    // 设置响应头
    res.writeHead(200, {
      'Content-Type': 'image/png'
    });
    // 将图片响应流直接转发给接口调用方
    response.body.pipe(res);
  } catch (err) {
    next(err);
  }
});

方案2：转为Buffer返回（适合需要对图片做二次处理的场景） #

// const fetch = require('node-fetch');
app.get("/media/funnycats", async (req, res, next) => {
  try {
    const fileIndex = Math.floor(Math.random() * catarray.length);
    const fileUrl = catarray[fileIndex];
    const response = await fetch(fileUrl);
    if (!response.ok) throw new Error('图片资源请求失败');
    // 将响应转为ArrayBuffer再转为Buffer
    const imgBuffer = Buffer.from(await response.arrayBuffer());
    res.writeHead(200, {
      'Content-Type': 'image/png',
      'Content-Length': imgBuffer.length
    });
    res.end(imgBuffer);
  } catch (err) {
    next(err);
  }
});

注意事项 #

• 若使用的Node.js版本低于18，没有内置fetch API，需要先安装node-fetch@2（v3版本仅支持ES模块，CommonJS项目使用v2版本），安装命令：npm i node-fetch@2
• 路由处理函数加了async关键字后，内部异步代码的报错要通过try/catch捕获，交给express的错误处理中间件处理，避免服务无响应崩溃。

内容的提问来源于stack exchange，提问作者Noah