javascript - CRUD 策略，每个 CRUD 操作使用一次还是两次调用？

Question

在开发 Web 应用程序时，我通常会看到人们执行增删改查和同步 View 的两种方式。

这里是使用 ajax 的高级示例。

1-方法一

创建操作可能涉及 POST 请求，成功后只需执行另一个 GET 并获取所有数据并重新呈现您的 View 。

删除操作类似，只需在删除成功时再执行一次 GET

2-方法二

创建操作可能涉及 POST 请求，该请求将仅返回插入的 ID，并且成功后不要执行另一个 GET 请求，而是将刚刚发送到 View 中当前项目列表的数据附加到 View 中。

删除操作将返回 id，成功后搜索具有该 id 的元素并从 DOM 或项目数组等中删除。

我很想知道什么通常更可取，例如方法二保存了 GET 请求，但前端代码非常复杂，因为现在您必须编写代码来计算出哪个项目需要要删除更新等，如果服务器需要向显示之前创建的项目添加更多数据，这将使方法二变得更加困难。另一方面，如果 GET 请求需要很长时间才能加载，性能会更好。

在我的项目中，根据复杂性，我可以根据情况使用任一方法，但我确实相信最好坚持使用一种方法。

Answer 1

采用方法 2。用户请求操作后立即操作您的 HTML。您的用户希望他们在您的页面上执行的任何操作都能立即得到反馈。在提供此反馈之前，您不能等待四分之一秒到一整秒等待后端响应。如果您这样做，用户很可能会再次尝试该操作 - 这只是当今所有用户的自然本能。

这就带来了一个问题:如果我的操作不成功并被后端拒绝怎么办？您还应该编写代码，以便在错误响应时，撤消检测到初始操作时所做的 View 更改，并提供一条消息(无论是显示明亮的 DIV 错误框还是通过弹出窗口提醒用户) )向用户告知他们的操作未成功完成。

这让您两全其美。您的用户可以获得流畅的 UI 体验，并且您可以提供一种方式来通知用户他们的请求是否被拒绝。

下面是一个如何使用 jQuery 编写此代码的示例。但这种技术适用于任何 JavaScript 框架(Backbone、Angular 等...)

$('#button').on('click', function(){
    //do some DOM changes that tell my user their action succeeded
    $.ajax({
        url: 'http://myendpoint.com',
        type: 'POST',
        data: {key: 'value'},
        error: function(){
            //undo my DOM changes since request failed
        }
    });
});