如何使用Nextjs API路由代替axios

yyhrrdl8  于 2023-10-18  发布在  iOS
关注(0)|答案(1)|浏览(333)

我在学习一个教程,他用axios来获取数据。但是现在Axios端点不工作了(给出一个服务器错误)
所以,我想知道如何在我的项目中使用Nextjs API路由而不是Axios。
如果你能指导我,我会很有帮助的
Landing.tsx page

const fetchData = async () => {
        const response = await axios(
          "https://liwaiw1kuj.execute-api.ap-southeast-1.amazonaws.com"
        ).get("/tasks");
        const tempData = get(response, "data.data", []);
        setData(tempData);
        setLoading(false);
      };
    
      useEffect(() => {
        fetchData();
      }, []);

其中一个组件页面的代码->

const ipfs = await axios(
          "https://liwaiw1kuj.execute-api.ap-southeast-1.amazonaws.com"
        ).post(
          "/ipfs",
          {
            ...description,
            salary,
            discord,
            whatsapp,
            telegram,
            signal,
          }
        );

或者是否有其他方法可以做到这一点。

c6ubokkw

c6ubokkw1#

要将Axios替换为Next.js API路由,请执行以下步骤:
1.**创建路由:**在api文件夹中,创建单独的路由文件(例如tasks.jsipfs.js)。
1.**迁移逻辑:**将Axios逻辑迁移到这些API路由。使用reqres处理请求和响应。
1.**更新组件:**将API路由的Axios调用替换为fetch
例如Landing.tsx

const fetchData = async () => {
  try {
    const response = await fetch("/api/tasks");
    const tempData = await response.json();
    setData(tempData);
    setLoading(false);
  } catch (error) {
    console.error(error);
  }
};

组件页面示例:

const ipfsResponse = await fetch("/api/ipfs", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    ...description,
    salary,
    discord,
    whatsapp,
    telegram,
    signal,
  }),
});

通过使用Next.js API路由,服务器端处理在Next.js项目中得到了简化。

相关问题