在 Next.js 14 项目中,获取 fetch 请求的响应参数

1、使用 await 获取 fetch 请求的响应。

2、解析响应以获取 JSON 数据。

下面是一个示例代码,展示了如何获取和处理响应参数:

javascript 复制代码
import { NextResponse } from 'next/server';

export default async function handler(req) {
  const dataToSend = {
    // 你的数据
  };

  try {
    const response = await fetch(`${req.nextUrl.origin}/api/import`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(dataToSend), // 将数据转换为 JSON 字符串
    });

    if (!response.ok) {
      // 处理错误响应
      console.error('HTTP error', response.status);
      return NextResponse.json({ error: 'Failed to fetch data' }, { status: response.status });
    }

    const responseData = await response.json(); // 解析 JSON 数据

    // 处理 responseData
    console.log('Response Data:', responseData);

    return NextResponse.json(responseData); // 返回解析后的数据
  } catch (error) {
    // 处理 fetch 过程中可能出现的错误
    console.error('Fetch error:', error);
    return NextResponse.json({ error: 'Fetch error' }, { status: 500 });
  }
}
相关推荐
cypking9 小时前
二、前端Java后端对比指南
java·开发语言·前端
摘星编程9 小时前
用React Native开发OpenHarmony应用:timing定时动画参数
javascript·react native·react.js
钟离墨笺9 小时前
Go语言--2go基础-->map
开发语言·后端·golang
JosieBook9 小时前
【Vue】12 Vue技术—— Vue 事件修饰符详解:掌握事件处理的高级技巧
前端·javascript·vue.js
摘星编程9 小时前
在OpenHarmony上用React Native实现AnimatedValue补间动画
javascript·react native·react.js
lsx2024069 小时前
DOM CDATA
开发语言
Tony Bai9 小时前
Go 语言的“魔法”时刻:如何用 -toolexec 实现零侵入式自动插桩?
开发语言·后端·golang
Coding茶水间10 小时前
基于深度学习的交通标志检测系统演示与介绍(YOLOv12/v11/v8/v5模型+Pyqt5界面+训练代码+数据集)
开发语言·人工智能·深度学习·yolo·目标检测·机器学习
摘星编程10 小时前
React Native鸿蒙版:AnimatedXY双轴动画完整代码
javascript·react native·react.js
a努力。10 小时前
字节Java面试被问:TCP的BBR拥塞控制算法原理
java·开发语言·python·tcp/ip·elasticsearch·面试·职场和发展