【nextjs strapi】如何统一封装 fetch 请求


前端 nextjs 接入 strapi 作为后端

如何封装请求呢

我们使用的是浏览器的 fetch

不用安装任何库

封装

frontend/src/app/[lang]/utils/fetch-api.tsx

javascript 复制代码
import qs from "qs";
import { getStrapiURL } from "./api-helpers";

export async function fetchAPI(
  path: string,
  urlParamsObject = {},
  options = {}
) {
  try {
    // Merge default and user options
    const mergedOptions = {
      next: { revalidate: 60 },
      headers: {
        "Content-Type": "application/json",
      },
      ...options,
    };

    // Build request URL
    const queryString = qs.stringify(urlParamsObject);
    const requestUrl = `${getStrapiURL(
      `/api${path}${queryString ? `?${queryString}` : ""}`
    )}`;

    // Trigger API call
    const response = await fetch(requestUrl, mergedOptions);
    const data = await response.json();
    return data;
    
  } catch (error) {
    console.error(error);
    throw new Error(`Please check if your server is running and you set all the required tokens.`);
  }
}

getStrapiURL 的内容是这样的:

javascript 复制代码
export function getStrapiURL(path = '') {
    return `${process.env.NEXT_PUBLIC_STRAPI_API_URL || 'http://localhost:1337'}${path}`;
}

如何调用

javascript 复制代码
    const token = process.env.NEXT_PUBLIC_STRAPI_API_TOKEN;
      const path = `/articles`;
      const urlParamsObject = {
        sort: { createdAt: "desc" },
        populate: {
          cover: { fields: ["url"] },
          category: { populate: "*" },
          authorsBio: {
            populate: "*",
          },
        },
        pagination: {
          start: start,
          limit: limit,
        },
      };
      const options = { headers: { Authorization: `Bearer ${token}` } };
      const responseData = await fetchAPI(path, urlParamsObject, options);

      if (start === 0) {
        setData(responseData.data);
      } else {
        setData((prevData: any[] ) => [...prevData, ...responseData.data]);
      }

token 的话

token

可以在这里设置

给一些足够的权限就好。

相关推荐
iCoding911 小时前
前端分页 vs 后端分页:技术选型
前端·后端·系统架构
mingtianyihou331 小时前
使用 Service Worker 限制请求并发数
前端
张可爱2 小时前
20251017-Vue2八股文整理(上篇)
前端
FanetheDivine2 小时前
ts中如何描述一个复杂函数的类型
前端·typescript
lightgis2 小时前
chrome中的axure插件提示无法不受支持
前端·chrome
速易达网络2 小时前
Vue3 原生移动应用开发来了
前端·javascript·css
渣哥2 小时前
别再乱用了!Spring AOP 与 AspectJ 的区别比你想的复杂
javascript·后端·面试
GISer_Jing2 小时前
LLM对话框项目技术栈&重难点总结
前端·ai·node.js
患得患失9492 小时前
【Turborepo】【Next】 Turborepo + Next.js 前后端精简搭建笔记(带官网)
开发语言·javascript·笔记
我爱学习_zwj2 小时前
【鸿蒙进阶-7】鸿蒙与web混合开发
前端·华为·harmonyos