英文:
Where should i put Axios baseUrl conf in sveltekit project?
问题
所有内容都在标题中，更具体地说，我正在使用Orval REST客户端生成器。文档中说可以为axios配置baseUrl。但我不太清楚在SvelteKit项目中应该把这种配置放在哪里，也许是在index.js文件中吗？
链接：https://orval.dev/guides/set-base-url#:~:text=Axios.defaults.baseURL%20%3D%20%27%3CBACKEND%20URL%3E%27%3B%20//%20use%20your%20own%20URL%20here%20or%20environment%20variable
英文:
All is in the title, more specially i am using the orval rest client generator. In the doc it says that you can configure baseUrl for axios.But i don't realy know where i should put this kind of config in a svletekit project, index.js maybe ?
答案1
得分: 1
Axios 似乎有一个设置，因此：
- 如果
baseUrl是https://api.example.com - 对于
/endpoint/path/的请求将获得https://api.example.com/endpoint/path/
首先，请不要在 SvelteKit 中使用 Axios。SvelteKit 有一个特殊版本的 fetch() 应该代替使用。
SvelteKit (fetch()) 没有像 axios.baseURL 这样的设置。
- 因此，您必须使用完整路径来调用外部 API。
- 内部 API 可以使用相对请求调用。
您可以编写一个自定义包装器，围绕 SvelteKit 的 fetch()，以实现与 axios.baseURL 相同的功能。编写一个接受 fetch() 函数和输出使用基础 URL 的自定义 fetch 的函数：
const makeFetchWithBaseUrl = (fetchFunction, baseUrl) => {
// 返回与 fetch() 相同签名的函数。
return (resource, options) => {
// 如果 resource 是一个不以 'http' 开头的字符串，添加 baseUrl。
if (typeof resource === 'string' && !/^http:/.test(resource)) {
resource = baseUrl + resource;
}
// 调用原始的 fetch
return fetchFunction(resource, options);
};
};
然后，您可以像这样使用上面的函数：
// 创建自定义 fetch 函数：
const exampleComFetch = makeFetchWithBaseUrl(fetch, 'https://example.com/');
// 然后使用它：
const response = await exampleComFetch('myEndpoint/path/');
英文:
Axios seems to have a setting so:
- If
baseUrlishttps://api.example.com - A request for
/endpoint/path/will gethttps://api.example.com/endpoint/path/
First of all, don't use Axios with SvelteKit. SvelteKit has a special version of fetch() that should be used instead.
SvelteKit (fetch()) does not have a setting like axios.baseURL.
- So you must call external API's with the full path.
- Internal API's may be called with relative requests.
You may write a custom wrapper around SvelteKit's fetch() that accomplishes the same thing as axios.baseURL. Write a function that takes the fetch() function as input, and outputs a custom fetch that uses a base URL:
const makeFetchWithBaseUrl = (fetchFunction, baseUrl) => {
// Return a function with same the signature as fetch().
return (resource, options) => {
// If resource is a string that doesn't start with 'http' prepend baseUrl.
if (typeof resource === 'string' && /^http:/.test(resource)) {
resource = baseUrl + resource
}
// Call the original fetch
return fetchFunction(resource, options)
}
}
Then you can use the function above like this:
// Make custom fetch function:
const exampleComFetch = makeFetchWithBaseUrl(fetch, 'https://example.com/')
// Then use it:
const response = await exampleComFetch('myEndpoint/path/')
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论