Koa 踩坑日记（一）：那些令人抓狂的小 bug

2024-02-02 17:17:42

嘿，小伙伴们！今天，我将揭开 Koa 开发之旅中那些令人抓狂的陷阱。作为一名坚定的 Koa 信徒，我曾信心满满地踏上征程，但没想到，现实给我狠狠地上了一课。不过，别担心，我将把踩过的坑和解决方法都和大家分享，让你们避开这些雷区，享受顺畅的 Koa 之旅。

在开始之前，让我们先来聊聊 SEO 优化。毕竟，谁不想让自己的文章成为 Google 的宠儿呢？以下是 Koa 相关的热门关键词：

好了，现在让我们进入正题吧！

踩坑一：视图渲染，渲染不出内容

app.use(koa.static('public'));
app.use(async ctx => {
  await ctx.render('index');
});

你会发现，无论如何修改模板，浏览器始终显示空白页面。这是因为 Koa 默认使用 EJS 作为视图引擎，而你的代码中并没有配置视图引擎。解决办法很简单：

const ejs = require('ejs');
app.use(koa.static('public'));
app.use(async ctx => {
  ctx.render = ejs.renderFile;
  await ctx.render('index');
});

踩坑二：跨域请求，无法访问 API

const axios = require('axios');
axios.get('http://example.com/api');

你可能会收到一个拒绝访问的错误。这是因为浏览器默认禁止跨域请求，以保护用户隐私。解决办法是设置 CORS 头信息：

const cors = require('kcors');
app.use(cors({
  origin: '*',
  allowMethods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowHeaders: ['Content-Type', 'Authorization']
}));

踩坑三：路由匹配，正则表达式误伤

app.get('/user/:id', async ctx => { /* ... */ });
app.get('/users', async ctx => { /* ... */ });

当你访问 /users 时，你会发现 /user/:id 也会匹配，导致错误的路由调用。这是因为正则表达式会贪婪地匹配，导致 /users 也被认为是 /user/:id 的一部分。解决办法是将正则表达式路由放在最后：

app.get('/users', async ctx => { /* ... */ });
app.get('/user/:id', async ctx => { /* ... */ });

踩坑四：错误处理，错误信息太少

try {
  // 这里可能会发生错误
} catch (err) {
  ctx.status = 500;
}

当错误发生时，你会发现错误信息非常模糊，无法定位问题。解决办法是使用 Koa 自己的错误处理机制：

try {
  // 这里可能会发生错误
} catch (err) {
  ctx.app.emit('error', err);
}

踩坑五：性能优化，请求过于频繁

app.get('/api/users', async ctx => {
  const users = await User.findAll();
  ctx.body = users;
});

当用户不断请求 /api/users 时，数据库查询会频繁执行，导致性能问题。解决办法是使用缓存或延迟加载：

const cache = new Cache();
app.get('/api/users', async ctx => {
  const users = await cache.get('users');
  if (!users) {
    users = await User.findAll();
    await cache.set('users', users);
  }
  ctx.body = users;
});