使用數據模型處理 API 響應

Question

我想問一下在客戶端對 API 響應進行建模是否有益。 更具體：

第一種方法：

const [formData, setFormData] = useState(null);
...
useEffect(() => {
    const callback = async () => {
      try {
        const fetchData = await axios.get(...);
        setFormData(fetchData.data);
      } catch (e) {
        ...
      }
    };
    callback();
  }, []);


return(
<Form>
  <Input name="first name" value={formData.firstName}/>
  <Input name="last name" value={formData.lastName}/>
</Form>
)

第二種方法：

const [formData, setFormData] = useState(new FormModel());
...
useEffect(() => {
    const callback = async () => {
      try {
        const fetchData = await axios.get(...);
        setFormData(...formData, fetchData.data);
      } catch (e) {
        ...
      }
    };
    callback();
  }, []);


return(
<Form>
  <Input name="first name" value={formData.firstName}/>
  <Input name="last name" value={formData.lastName}/>
</Form>
)

其中FormModel已在另一個文件中定義，例如：

export class FormModel {
  firstName: string = undefined;
  lastName: string = undefined;
}

第二種方法是否更有益？為什么？ 我們是否需要對從服務器獲取的數據進行建模？ 在第一種方法中使用formData接口而不是實現第二種方法是不是一樣？

PS 第二種方法可能與第一種方法沒有太大區別。 然而，我們已經多次看到 UI 創建模型來管理從/向服務器獲取/發送的數據，並想知道我們獲得的真正好處是什么。

Answer 1

取決於您認為對您的業​​務問題有益的內容。

第二種方法將從默認值開始，作為臨時顯示值可能有益； 並將保留不在響應中的舊字段值，這對您的情況可能有益也可能無益。 那一切。

除非你使用 TypeScript，否則沒有人會強制執行任何模型規則。

順便說一句，您應該將代碼修改為：

setFormData(prev => ({...prev, fetchData.data}));

否則 React 會抱怨缺少效果依賴。

Answer 2

首先，這個問題很有趣，我不知道為什么，幾乎開發人員不會問這樣的問題。 這是一個至關重要的問題，我將向您展示我的想法。

我需要提到的一件事，請忽略TypeScript部分，因為它只是一個編譯器，有或沒有TypeScript，與我的答案無關，我將向您展示我的大圖。

看來您是前端開發人員。 快速回答應該是：第二種方法是我的首選，也是前端開發人員應該做的。 它有一些好處是：

• 它強制前端本身具有嚴格的數據結構。 請注意，“數據結構”並不意味着 TypeScript 類型或接口。 數據結構是每個開發人員應該考慮的第一件事。
• 當您在客戶端擁有該“模型”時，您可以創建一個“映射函數”以將“您從后端獲得的內容”映射到您的“模型”。 這個東西有一個關鍵的優勢是：你只需要改變映射函數，前端的其他一切都應該自動工作。
• 如果您正在使用 REST 后端，您將看到我的上述觀點，因為您無法控制要響應的確切數據結構。 REST 本身沒有辦法控制客戶端和服務器端之間的數據。 而且你不能相信你的后端開發人員，因為人類總是會犯錯誤。

如果您使用的是 GraphQL 而不是 REST，由於其嚴格的 GraphQL 類型，您將永遠不會再問這個問題。 GraphQL 應該是 API 的未來，這應該是客戶端和服務器端通信的方式。 這對你來說是一個更大的圖景。

希望我的回答能讓你滿意。 我也是一名前端開發人員，一切都依賴后端開發人員並不是我喜歡的工作方式，尤其是在一個非常大的團隊中。 人越多，錯誤越多。

快樂編碼！

@ShinaBR2

Answer 3

如果您知道服務器響應，您可以簡單地傳遞對象，以便您可以創建一個包含您需要的所有對象的文件，並且您可以分配默認值，如果是復制類型為 TypeScript 的更簡單的方法，當然你需要更多的東西

const formExampleModel = {
  firstName: '',
  lastName: ''
}

const [formData, setFormData] = useState(formExampleModel);
...
useEffect(() => {
    const callback = async () => {
      try {
        const fetchData = await axios.get(...);
        // Here comes the trick, you can choose if you want save the initials value 
        // or replace all, so you can use 
        // setFormData(fetchData.data) -> to replace all
        // setFormData(prev => ({...prev, fetchData.data})) -> to keep no matches data
        setFormData(fetchData.data);
      } catch (e) {
        ...
      }
    };
    callback();
  }, []);


return(
<Form>
  <Input name="first name" value={formData.firstName}/>
  <Input name="last name" value={formData.lastName}/>
</Form>
)