優維低程式碼:Use Resolves

語言: CN / TW / HK

優維低程式碼技術專欄,是一個全新的、技術為主的專欄,由優維技術委員會成員執筆,基於優維7年低程式碼技術研發及運維成果,主要介紹低程式碼相關的技術原理及架構邏輯,目的是給廣大運維人提供一個技術交流與學習的平臺。

連載第十四期

《高階指引:Use Resolves》

useResolves 是構件生命週期的重要特性,它扮演著類似 Angular Router 的 Resolve 角色。它主要解決構件初始化需要的非同步資料請求,簡化構件編寫的程式碼量,並且使平臺統一解決相關載入狀態和錯誤反饋成為了可能。

⊙NOTE

現在更推薦通過在路由上定義  Context 上下文 來處理非同步資料,以實現更高效的請求併發。

# 示例

如下的構件配置,平臺在渲染該構件前,將首先呼叫useProvider 指定的 Provider 構件 的 resolve() 方法,並使用指定的 args 引數,請求完成時,將使用 name 指定的屬性名賦值給該構件。平臺將確保構件渲染前獲得該屬性,因此構件不再需要對該資料請求處理載入狀態及錯誤反饋,這些將由平臺統一處理。

bricks:
  - brick: your.awesome-brick
    lifeCycle:
      useResolves:
        - useProvider: your.awesome-provider
          args: ["${someQueryParam}"]
          name: someProp

在早期版本中,我們只提供了通過 provider 指定CSS Selector 並需提前在 bricks 或 providers 中主動宣告對應的 Provider 構件的方式來使用 useResolves,例如以下的構件配置,平臺在渲染該構件前,將首先找到 provider 匹配的對應的 Provider 構件 ,然後執行它的 resolve() 方法,並使用指定的 args 引數,請求完成時,將使用 name 指定的屬性名賦值給該構件。

bricks:
  - brick: micro-app-store.provider-app-detail
    bg: true
    args:
      - "${appId}"
  - brick: micro-app-store.micro-app-detail
    lifeCycle:
      useResolves:
        - name: appDetail
          provider: micro-app-store\.provider-app-detail

現在我們更推薦使用 useProvider,因為它相比於早期的 provider 欄位具有以下優勢:

  • 使用構件名,無需對構件名中的點號 . 進行轉義;
  • 不需要在 bricks 或 providers 中提前宣告該構件。

useProvider 即用即取、無狀態,如果希望在分步更新引數等場景下使用,可以結合 Context 上下文 來處理。

注意

  • useProvider 欄位為 Provider 的構件名。
  • provider 欄位為 Css Selector,因此構件名稱中的 . 需要轉義。
  • 使用 provider 欄位時,對應的 Provider 構件在 bricks 列表中需要指定 bg: true 才能正常工作。

通過平臺提供的腳手架工具 yarn yo 或封裝的方法 createProviderClass 可以快速建立 Provider 構件,請參考 Provider 構件的建立

# 配置說明

useResolves 有兩種模式:

普通配置模式:

注意:useProvider 和 provider 應選取且只選取一種,它們的差別在本文上一章節有描述。

使用 ref 模式:

其中 args 引數有多種來源:

  1. 優先使用 useResolves 配置中的 args,它支援和屬性配置一致的模板字串,並且預設啟用 injectDeep: true。
  2. 其次使用 Provider 構件的 args 屬性,它可以通過 Provider 構件的 properties 等方式設定。

注意:templates 也可以使用 useResolves,只不過取得的資料將傳遞給 params 而不是 properties。

# defineResolves

在Storyboard 的路由配置中,可以使用defineResolves預定義一些resolves 以供 useResolves 引用。例如:

# Route
path: "/index",
defineResolves:
  - id: "cmdb-model-list"
    provider: "cmdb.get-object-list"
    args:
      - pageSize: 3000
    field: "data.list"

在構件中可以這樣使用:

# Brick
brick: "your-brick",
lifeCycle:
  useResolves:
    - name: "cmdbModelList"
      ref: "cmdb-model-list"

#配置說明

defineResolves 與 useResolves 的普通配置模式上大體相似,主要有以下不同:

  • defineResolves 必須宣告一個 id。
  • defineResolves 不能宣告屬性名 name。
  • defineResolves 中的 transform 不再有「轉換成屬性」的用途,而是「給 useResolves 提供資料來源」的作用。

# 請求異常處理 onReject

通常不需為 useResolves 設定異常處理,因為系統會統一捕獲並顯示錯誤資訊。由於 useResolves 請求的資料定義為頁面依賴的必要資料,因此頁面載入過程中任何 useResolves 出現錯誤將使整個頁面停止載入並顯示對應的錯誤資訊。

有時候我們期望某些構件的某些請求錯誤可以不影響頁面中其它構件的渲染,此時我們可以設定 onReject 對請求錯誤進行特殊處理。

方式一:設定 onReject: { transform: ... } 進行資料轉換後重新賦值給構件的相關屬性,此時轉換的資料來源為該錯誤物件。此方法適用於支援空狀態(錯誤狀態)的屬性配置的構件。

方式二:設定 onReject: { isolatedCrash: true } 使用系統提供的一個報錯構件替代原構件,並顯示對應的報錯資訊。此方法適用於不支援空狀態(錯誤狀態)的屬性配置的構件。

有疑問加站長微信聯絡(非本文作者)