单击 formik 表单中的保存按钮时如何组织两个 api 调用

Question

假设我们有一个带有保存按钮的表单。一个补丁 api 调用保存了用户在点击保存按钮时填写的大部分字段。但是，我们在表单中有一个复选框字段需要另一个 api 来检查用户权限并在单击保存按钮时保存用户的选择以及其他字段。

例如：

序列 1 补丁 api/1

• 如果此 API 调用成功，则将某些字段更新到数据库。然后继续调用序列2API

序列 2 补丁 api/2

• 如果这个 API 调用 return 出错，则停止调用下一个 API，并且 UI return 是一个 error/warning 信息。更新保存不成功，部分数据已经保存到数据库，误导用户

• 此外，在某些字段中，一旦值已经更新到数据库中。 UI 会将屏幕更新为只读模式，以防止用户更新这些字段。如果 UI 中有指示更新和保存不成功的警告消息，这可能会导致混淆。

序列 3 补丁 api/3

Answer 1

我建议您将第二次调用放在 .then 中的 api 中，然后放在第一个 api 调用之后。这样，如果第一个 api 失败，将出现 1 个错误，客户端将在解决该错误后继续。否则如果你尝试分别调用它们，如果第一个失败，它会转到第二个，如果也失败，将向客户端显示两个错误，这听起来不太用户友好。

Answer 2

另一种处理方法是在 handleSave 函数中使用 async-await，有点像这个伪 javascript 代码：

const handleSave = async () => {

    // First API call related to the checkbox
    let response = await fetch("apiroute/first-call", { /* ... */ });
    
    // Check if the api call has given an error (this should be adapted to the actual server response returned by your APIs)
    if (!response.ok) {
        // handle the error related to the checkbox (this is just an example)
        setError("You don't have the permission to check this box");
        
        // stop the function here
        return;
    }

    // Second API call
    let response = await fetch("apiroute/second-call", { /* ... */ });

    if (!response.ok) {
        // handle second error related to the fields (also, this is just a minimal example)
        setError("There was some error in the submitted fields");
    }
}

单击 formik 表单中的保存按钮时如何组织两个 api 调用

How to organize two api calls when clicking save button in the formik form

api

async-await

reactjs

formik