[Next.js] Mock

官方解决方案

官方文档：Next.js API Routes

Next.js 9.0+ 提供了Mock数据功能，mock 路由规则与页面路由规则基本一致。

1. 新建文件夹 pages/api （名字不能改）, 所有mock文件都放在这个目录中，打包时该目录的文件不会被写入页面路由列表

2. 新建文件 mock文件 pages/api/init.js (ts也支持)

   // export a request handler function instead of a React Component
   export default function handle(req, res) {
       // 返回非 json 数据
       // res.end('Hello World')
   
       // 返回 json 数据
       res.json({
           code: 0,
           msg: 'Success',
           data: {
               countryCode: 'US',
               currencyName: 'USD'
           }
       })
   }
   

3. 访问url http://localhost:3000/en/api/init，可以看到返回了json数据。

模拟延迟

import delay from '@/utils/delay';

export default async function handle(req, res) {
    await delay(3000); // 参数为需要延迟的时间
    res.json({});
}

utils/delay.ts

/**
 * 等待时间结束
 * @param ms 等待毫秒数
 */
export default function delay(ms: number): Promise<void> {
    return new Promise((resolve) => {
        setTimeout(resolve, ms);
    })
}