Express+TypeScript中使用ES6生成器无响应问题排查

你遇到的核心问题是：Express 本身并不支持直接将 ES6 生成器函数作为路由处理函数。生成器函数调用后会返回一个迭代器对象，Express 不知道如何去迭代执行这个对象，导致你的代码执行到 yield 语句就暂停了，后面的 res.send() 根本没机会执行，所以接口一直处于挂起状态，没有响应返回。

下面给你两种可行的解决方法，其中第二种是更符合现代 TypeScript/JavaScript 开发习惯的方案：

方法一：使用 co 库包装生成器函数 #

co 是一个专门用于处理生成器的工具库，它可以自动迭代生成器，并且处理 yield 后面的 Promise，最终将生成器的执行逻辑转换成 Promise，而 Express 是支持返回 Promise 的异步路由处理函数的。

步骤： #

1. 先安装依赖及类型声明：

npm install co @types/co

2. 修改你的 Test.ts 文件：

import co from 'co';
import { Request, Response } from 'express';
import axios from 'axios';

// 用 co.wrap 包装生成器函数，转换成返回 Promise 的函数
export const ajax = co.wrap(function*(req: Request, res: Response) {
  const html: string = yield getHtml("http://www.wagamatic.com");
  res.send({ length: html.length });
});

function getHtml(url: string): Promise<string> {
  // 简化 Promise 写法，axios.get 本身就返回 Promise
  return axios.get(url).then(res => res.data);
}

方法二：改用 async/await（推荐） #

async/await 本质上是生成器 + Promise 的语法糖，它更直观易懂，而且 Express 原生支持返回 Promise 的 async 函数作为路由处理函数，不需要额外引入第三方库。

修改你的 Test.ts 文件：

import { Request, Response } from 'express';
import axios from 'axios';

// 改成 async 函数
export async function ajax(req: Request, res: Response) {
  // 用 await 替代 yield，等待 Promise 完成
  const html: string = await getHtml("http://www.wagamatic.com");
  res.send({ length: html.length });
}

function getHtml(url: string): Promise<string> {
  return axios.get(url).then(res => res.data);
}

这样修改后，你的 /test/ajax 接口就能正常执行逻辑并返回响应了。

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