当前位置：首页 > news >正文

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

news 2025/11/22 8:39:44

在这里插入图片描述

前端 nextjs 接入 strapi 作为后端

如何封装请求呢

我们使用的是浏览器的 fetch

不用安装任何库

封装

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

import qs from "qs";
import { getStrapiURL } from "./api-helpers";export async function fetchAPI(path: string,urlParamsObject = {},options = {}
) {try {// Merge default and user optionsconst mergedOptions = {next: { revalidate: 60 },headers: {"Content-Type": "application/json",},...options,};// Build request URLconst queryString = qs.stringify(urlParamsObject);const requestUrl = `${getStrapiURL(`/api${path}${queryString ? `?${queryString}` : ""}`)}`;// Trigger API callconst 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 的内容是这样的：

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

如何调用

    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]);}