在我们当前的技术阶段,速度不再是一个功能,而是一种需求。开发人员知道更长的等待时间会导致用户经历负面感觉以及网站或应用程序不可靠的印象。因此,在应用程序中失去用户的机会很可能。 Ajax的引入是丰富的用户体验的重要补充。即使其他任务在后台运行,用户也可以与页面进行交互。
呈现内容而无需刷新的能力已成为用户所期望的UI标准。但是,用户要求从应用程序和内容立即出现的内容中更多的流动性。这是因为处理请求并将内容返回给用户需要特定的期限。
这种情况是乐观和悲观的方法来进行的。当他们在同一位置开始时,他们如何处理Ajax请求有所不同。
对于示例,假设我们在屏幕上显示了一个用户列表,并且我们希望在删除用户时更新屏幕。
悲观的方法
悲观的方法一旦完成API调用并确认了数据或状态后,就会更新UI。这种方法优先考虑对用户的即时反馈的一致性和可靠性。
上述示例的典型悲观流量如下:
- 用户单击删除按钮
- 将请求发送到服务器以删除用户
- 服务器发送成功响应或 失败的错误消息
- 根据服务器发送的响应,客户端 侧面应用程序要么更新内容,要么显示 故障消息
在发生这种情况时,用户都在等待UI中的更改。即使这可能只需几秒钟,它也会对用户体验产生明显影响。悲观的方法可能会导致响应速度较低且响应较低的用户体验。
例子
deleteButton.addEventListener("click", function (event) {
//Server call begins
deleteUser(api_url)
.then(response => response.json())
.then(json => pessimisticUserUpdate(json))
.catch(error => console.error(error))
//Server call ends
})
// a helper function that updates the user list
function pessimisticUserUpdate(json){
updateUser();
}
在上面的示例中,首先,单击删除按钮,然后将请求发送到服务器;服务器发送响应后,将更新用户列表并渲染到客户端
乐观的方法
在乐观的方法中,在API调用完成之前,请立即使用新数据或状态更新UI。这种方法优先考虑对用户的即时反馈,而不是一致性和可靠性。
上述示例的典型乐观流量如下:
- 用户单击删除按钮
- 内容更改的状态更新
- 将请求发送到服务器以删除用户
- 服务器在失败的情况下发送错误消息
- 根据服务器发送的错误,错误是 在客户端应用程序上显示,状态已更改为 原始状态
例子
deleteButton.addEventListener("click", function (event) {
optimisticallyUpdateUser();
//Server call begins
deleteUser(api_url)
.then(response => response.json())
.then(json => console.log("user deleted successfully"))
.catch(error => {
console.log("Something went wrong while deleting the
user");
revertOptimisticChange();
})
//Server call ends
})
// a helper function that updates the user list
function optimisticallyUpdateUser(json){
updateUser();
}
在上面的示例中,首先,用户单击“删除”按钮,然后在客户端呈现更新的用户列表。之后,称为API;如果API请求失败,则将用户状态更新回其原始表格。
结论
对于速度和响应性至关重要的情况以及显示不一致数据的风险很低的情况,乐观的方法通常是优选的。但是,如果数据一致性至关重要(例如金融交易或医疗记录),则悲观方法可能更合适。