解决Express中未定义Fetch问题

问题背景

在使用Express开发后端应用时，如果需要在Node.js中进行Http请求，则通常使用Node.js自带的Http模块或第三方模块如request。然而，在某些情况下，我们需要在后端使用浏览器中的Fetch API来进行Http请求。在这种情况下，如果我们尝试在Express应用程序中使用Fetch，则通常会收到一个未定义（Undefined）的错误消息。

问题原因

Express是一个Node.js的Web应用程序框架，而Fetch API是一个浏览器中的API，因此它们是不同的环境。在Node.js环境中，Fetch API是未定义的，因此如果我们尝试在Express中使用它，则会收到一个未定义的错误。

解决方案

1. 使用node-fetch

node-fetch 是一个基于fetch规范实现的 Http请求库，旨在在 Node.js 环境下提供给 Node.js 开发人员一个 Fetch API 以统一 HTTP 请求的网络标准. 该库可在Node.js中使用Fetch API，因此我们可以在Express中使用该库来发出Http请求。

const fetch = require('node-fetch');

app.get('/', async (req, res) => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    res.send(data);
  } catch(error) {
    console.log(error);
    res.send(error);
  }
});

2. 使用isomorphic-fetch

isomorphic-fetch 是针对服务端与客户端两个环境下使用 Fetch 的解决方案。它提供了对 Promise 和 Headers 的预设，使在两个环境下的使用更加方便。

const fetch = require('isomorphic-fetch');

app.get('/', async (req, res) => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    res.send(data);
  } catch(error) {
    console.log(error);
    res.send(error);
  }
});

总结

在使用Express中发出 Http 请求时，如果需要使用 Fetch API 需要使用第三方库 node-fetch 或 isomorphic-fetch。这些库可在 Node.js 中使用 Fetch API，并在 Express 应用程序中使用，从而绕过“未定义”的错误消息。