Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: customized http interceptors #863

Closed
wants to merge 5 commits into from
Closed

feat: customized http interceptors #863

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e52acb5
feat: customized http interceptors
yy-wow Oct 16, 2024
bc684e8
fix: coderabbitai review
yy-wow Oct 16, 2024
a6effe0
fix: add comments
yy-wow Oct 16, 2024
1b852c2
Merge branch 'refactor/develop' of github.com:opentiny/tiny-engine in…
yy-wow Oct 28, 2024
3b3c7f7
feat: export createHttp
yy-wow Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion designer-demo/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,18 @@

// 导入@opentiny/tiny-engine时，内部的依赖包也会逐个导入，可能会执行useComplie，此时需要templateHashMap。所以需要先执行一次defineEntry
import { registry } from './defineEntry.js'
import { init } from '@opentiny/tiny-engine'
import { init, createHttp } from '@opentiny/tiny-engine'
import { configurators } from './configurators/'
import 'virtual:svg-icons-register'
import '@opentiny/tiny-engine-theme'

const preRequest = (config) => {
config.headers['x-org-name'] = 123
return config
}
Comment on lines +20 to +23
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Several improvements needed for the preRequest interceptor.

The current implementation has potential issues:

  1. The hardcoded value '123' needs documentation explaining its purpose
  2. Missing error handling for undefined headers
  3. Direct mutation of the config object could cause side effects
  4. The purpose of 'x-org-name' header should be documented

Consider this safer implementation:

+/**
+ * HTTP request interceptor that adds organization context
+ * @param {Object} config - The axios request configuration
+ * @returns {Object} Modified config object
+ */
 const preRequest = (config) => {
-  config.headers['x-org-name'] = 123
+  return {
+    ...config,
+    headers: {
+      ...config.headers,
+      'x-org-name': '123' // TODO: Document the purpose of this value
+    }
+  }
-  return config
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const preRequest = (config) => {
config.headers['x-org-name'] = 123
return config
}
/**
* HTTP request interceptor that adds organization context
* @param {Object} config - The axios request configuration
* @returns {Object} Modified config object
*/
const preRequest = (config) => {
return {
...config,
headers: {
...config.headers,
'x-org-name': '123' // TODO: Document the purpose of this value
}
}
}


createHttp({ force: true, requestInterceptors: [preRequest] })

init({
registry,
configurators,
Expand Down
1 change: 1 addition & 0 deletions packages/design-core/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export { default as Styles } from '@opentiny/tiny-engine-setting-styles'
export { default as Layout, LayoutService } from '@opentiny/tiny-engine-layout'
export { default as Canvas } from '@opentiny/tiny-engine-canvas'
export { initPreview } from './src/preview/src/main'
export { initHttp, createHttp } from '@opentiny/tiny-engine-http'
export {
GenerateCodeService,
PluginPanel,
Expand Down
28 changes: 25 additions & 3 deletions packages/http/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ let environment = import.meta.env // 当前设计器运行环境变量
const isVsCodeEnv = window.vscodeBridge
const isMock = () => environment.VITE_API_MOCK === 'mock'

export const createHttp = (options) => {
export const createHttp = (options = {}) => {
// 缓存http实例，避免每个请求重新创建实例
if (http && !options.force) {
return http
Expand All @@ -88,7 +88,18 @@ export const createHttp = (options) => {
return config
}

// 请求拦截器
// 请求拦截器，先注册后执行
const { requestInterceptors = [] } = options
// requestInterceptors：[ [requestInterceptor1, requestErrorInterceptor1], requestInterceptor2 ]
requestInterceptors.forEach((item) => {
if (Array.isArray(item)) {
http.interceptors.request.use(...item)

return
}

http.interceptors.request.use(item)
})
http.interceptors.request.use(preRequest)

const preResponse = (res) => {
Expand Down Expand Up @@ -132,8 +143,19 @@ export const createHttp = (options) => {
return response?.data.error ? Promise.reject(response.data.error) : Promise.reject(error.message)
}

// 响应拦截器
// 响应拦截器，先注册先执行
http.interceptors.response.use(preResponse, errorResponse)
// responseInterceptors：[ [responseInterceptor1, responseErrorInterceptor1], responseInterceptor2 ]
const { responseInterceptors = [] } = options
responseInterceptors.forEach((item) => {
if (Array.isArray(item)) {
http.interceptors.response.use(...item)

return
}

http.interceptors.response.use(item)
})

return http
}
Expand Down