【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

可以在这里设置

给一些足够的权限就好。

相关推荐
TechFrank5 分钟前
Shadcn/ui 重磅更新:7 个实用新组件深度解析与实战指南
前端
快乐是一切12 分钟前
PDF中的图像与外部对象
前端
前端开发呀18 分钟前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序
今天周二20 分钟前
vite 将react老项目中的没有兼容处理的写法转成兼容性写法
react.js
云枫晖22 分钟前
破壁前行:深度解析前端跨域的本质与实战
前端·浏览器
文心快码BaiduComate23 分钟前
代码·创想·未来——百度文心快码创意探索Meetup来啦
前端·后端·程序员
小白640227 分钟前
前端梳理体系从常问问题去完善-框架篇(Vue2&Vue3)
前端
云和数据.ChenGuang31 分钟前
vue中构建脚手架
前端·javascript·vue.js
渣哥34 分钟前
面试官最爱刁难:Spring 框架里到底用了多少经典设计模式?
javascript·后端·面试
千与千寻酱37 分钟前
排列与组合在编程中的实现:从数学概念到代码实践
前端·python