在Angular 16（请注意，截至我所知的最新版本为Angular 15，未来可能会有Angular 16）中模拟REST API响应，您可以使用诸如ng-apimock、json-server、MockServiceWorker (MSW) 或者直接编写自定义HTTP等工具来实现。这里以MSW为例，提供一个模拟API响应的案例：
使用Mock Service Worker (MSW)
1.安装MSW：
Bash
npm install --save-dev msw
2.设置worker并创建mock响应：在项目根目录下创建一个
src/setupWorkers.js文件，配置模拟服务端路由和响应数据。
Javascript
// src/setupWorker.js
import { setupWorker, rest } from'msw';
const worker = setupWorker(
<('/api/users', (req, res, ctx) => {
return res(
ctx.json([
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Smith' },
])
angular安装
);
}),
// 可添加更多模拟路由...
);
export { worker };
3.注册worker：在测试配置或应用入口点启动worker。
Javascript
// src/main.ts (仅用于开发环境)
if (environment.production) {
// 生产环境逻辑
} else {
// 开发环境启用mock服务
import { worker } from'./setupWorker';
worker.start();
}
4.在应用中使用HttpClient调用API：前端代码无需更改，正常通过
HttpClient调用API即可。
Typescript
// app.service.ts
import { HttpClient } from'@angular/common/http';
@Injectable({ providedIn: 'root' })
export class UserService {
constructor(private http: HttpClient) {}
getUsers() {
return ('/api/users');
}
}
现在，在开发环境下，所有对/api/users的GET请求都会被MSW拦截，并返
回预设的模拟数据，而不是实际发出网络请求。
请根据实际情况调整模拟响应的内容以及模拟路由的数量与类型。对于Angular CLI生成的应用程序，确保正确地在不同环境下控制mock服务的开关。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。