Next.js 搞混了 API 回复
Next.js getting mixed up API responses
我正在尝试使用 Next.js 开发我的第一个应用程序,但发生了一些真正困扰我的事情。
我的应用程序在第一次加载后发出 2 个请求,/api/me
和 /api/feed
我的组件像这样获取数据:
useEffect(() => {
async function loadData() {
const res = await fetch('/api/me');
try {
const body = await res.json();
if (body.error) {
return router.push('/login');
}
setUser(body.user);
} catch (e) {
router.push('/login');
}
}
loadData();
}, []);
useEffect(() => {
async function loadFeed() {
const res = await fetch('/api/feed');
const body = await res.json();
console.log('fetch', body.data);
setFeed(body.data);
}
if (user) {
loadFeed();
}
}, [user]);
我的问题是,有时在重新加载时,响应会混淆。 /feed
returns 一个数组和 /me
一个对象。重新加载时,/feed
和/me
有时都从/me
接收对象,有时他们都从/feed
获取数组,有时它可以正常工作。我没有发现任何人报告这样的错误,所以我假设它是我某个地方的错误。
/pages/feed/api.js
import handler from '../../helpers/routes/handler';
import auth from '../../middlewares/auth';
import * as feedController from '../../controllers/feed';
export default handler
.use(auth)
.get((req, res) => feedController.get(req, res));
handler.js
import nextConnect from 'next-connect';
import { getSession } from '../../config/passport/encrypt';
const handler = nextConnect()
.use(async (req, res, next) => {
const session = await getSession(req);
if (!session) {
return next();
}
...
next();
});
export default handler;
controllers/feed.js
import * as expertMarketerService from '../services/expert_marketer';
// eslint-disable-next-line import/prefer-default-export
export const get = async (req, res) => {
const data = await expertMarketerService.get(req.user);
return res.status(200).send({ data });
};
pages/api/me.js
import handler from '../../helpers/routes/handler';
import auth from '../../middlewares/auth';
export default handler
.use(auth)
.get((req, res) => res.status(200).send({ user: req.user }));
我发现了问题。我对不同的路由使用相同的 next-connect 实例,这是不行的。
https://github.com/hoangvvo/next-connect/issues/106
解决方案是为每个页面导入 next-connect,并为该共享逻辑使用中间件
我找到了解决办法。有同样的问题。我所做的是创建和导出模块而不是直接导出。这是我的代码
import nc from 'next-connect';
import someCommonMiddleware from '..some-common-middlware-path';
module globalHandler {
const config = {
onError : (error, req, res) => {
// handle errors
}
};
export function handle() {
return nc(config)
.use(someCommonMiddleware);
}
}
export default globalHandler;
那你就可以这样使用了
import { NextApiRequest, NextApiResponse } from 'next';
import globalHandler from '..your-global-handler-path';
const handler = globalHandler.handle()
.get(async (req: NextApiRequest, res: NextApiResponse) => {
// handle url api response here
});
export default handler;
我正在尝试使用 Next.js 开发我的第一个应用程序,但发生了一些真正困扰我的事情。
我的应用程序在第一次加载后发出 2 个请求,/api/me
和 /api/feed
我的组件像这样获取数据:
useEffect(() => {
async function loadData() {
const res = await fetch('/api/me');
try {
const body = await res.json();
if (body.error) {
return router.push('/login');
}
setUser(body.user);
} catch (e) {
router.push('/login');
}
}
loadData();
}, []);
useEffect(() => {
async function loadFeed() {
const res = await fetch('/api/feed');
const body = await res.json();
console.log('fetch', body.data);
setFeed(body.data);
}
if (user) {
loadFeed();
}
}, [user]);
我的问题是,有时在重新加载时,响应会混淆。 /feed
returns 一个数组和 /me
一个对象。重新加载时,/feed
和/me
有时都从/me
接收对象,有时他们都从/feed
获取数组,有时它可以正常工作。我没有发现任何人报告这样的错误,所以我假设它是我某个地方的错误。
/pages/feed/api.js
import handler from '../../helpers/routes/handler';
import auth from '../../middlewares/auth';
import * as feedController from '../../controllers/feed';
export default handler
.use(auth)
.get((req, res) => feedController.get(req, res));
handler.js
import nextConnect from 'next-connect';
import { getSession } from '../../config/passport/encrypt';
const handler = nextConnect()
.use(async (req, res, next) => {
const session = await getSession(req);
if (!session) {
return next();
}
...
next();
});
export default handler;
controllers/feed.js
import * as expertMarketerService from '../services/expert_marketer';
// eslint-disable-next-line import/prefer-default-export
export const get = async (req, res) => {
const data = await expertMarketerService.get(req.user);
return res.status(200).send({ data });
};
pages/api/me.js
import handler from '../../helpers/routes/handler';
import auth from '../../middlewares/auth';
export default handler
.use(auth)
.get((req, res) => res.status(200).send({ user: req.user }));
我发现了问题。我对不同的路由使用相同的 next-connect 实例,这是不行的。
https://github.com/hoangvvo/next-connect/issues/106
解决方案是为每个页面导入 next-connect,并为该共享逻辑使用中间件
我找到了解决办法。有同样的问题。我所做的是创建和导出模块而不是直接导出。这是我的代码
import nc from 'next-connect';
import someCommonMiddleware from '..some-common-middlware-path';
module globalHandler {
const config = {
onError : (error, req, res) => {
// handle errors
}
};
export function handle() {
return nc(config)
.use(someCommonMiddleware);
}
}
export default globalHandler;
那你就可以这样使用了
import { NextApiRequest, NextApiResponse } from 'next';
import globalHandler from '..your-global-handler-path';
const handler = globalHandler.handle()
.get(async (req: NextApiRequest, res: NextApiResponse) => {
// handle url api response here
});
export default handler;