NextJS 13 数据获取

Question

他们的 fetch 方法是否有自定义的 baseURL？

例如在axios中：

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

Answer 1

根据我的理解，你想使用本机方法来获取数据（API）。
因为 JS 有一个 fetch('url) 方法。如果您只想从端点获取数据，那么只需传递 url 即可获得结果（使用await）

let data=fetch('https://some-domain.com/api/');

很简单，或者你可以用 header 来定义整个正文。

fetch("https://some-domain.com/api/", {
  method: "POST",
  body: JSON.stringify({
    your: data,
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8"
  }
});

以上代码片段适用于 POST 方法。其他方法与此类似。

Answer 2

我认为

fetch Api

不存在诸如baseUrl之类的东西。

您可以从

fetchApi

创建包装器，这样您只需要传递 URL 一次。

const fetchWrapper = (path: string) => {
   return fetch(`${BASE_URL}${path}`)
}

Answer 3

我要在这里冒险，但你也可以使用

.env

-文件。

我目前在一个项目中使用这种方法，

NEXT_PUBLIC_BASE_URI=http://localhost:3000
NEXT_PUBLIC_ROOT_ID=8793d6a9-a604-448d-92o0-266cca56f89f
NEXT_PUBLIC_CMS_URI=http://localhost:45959
NEXT_PUBLIC_CONTENT_URI=http://localhost:45959/umbraco/delivery/api/v1/content
NEXT_PUBLIC_API_URI=http://api.my-development-server.com
NEXT_PUBLIC_API_URI_v3=https://www.production-server-name.io/api/v3/

然后将组件中的 url 替换为

${process.env.NEXT_PUBLIC_API_URI}

这样，你就有了一个全局的“baseUrl”。并且这个url在开发过程中使用的环境之间是不同的。它们都已在 .env 文件中设置并读取。 （.env.local、.env.development、.env.Production 等）。

推送到存储库时，不要忘记排除适当的 .env 文件。您不希望在生产环境中出现错误的文件。

来源：个人经历