同步:
优点:简单直观,代码从上往下执行,因为代码从上到下执行,因此不会涉及回调函数等异步操作
缺点:
1.同步请求会阻塞整个程序或页面,使得用户界面在请求完成前处于不响应状态。这可能导致页面卡顿、用户体验差,特别是在大量同步请求的情况下。
2.步请求可能对应用的性能产生负面影响,因为它们会占用执行线程并阻塞其他任务。
3.在大规模并发请求的情况下,同步请求可能导致服务器资源瓶颈,并影响整体性能。
异步:
优点:
提高性能: 异步请求允许在等待服务器响应的同时执行其他任务,不会阻塞程序的执行。这有助于提高应用的响应速度和性能。
提高用户体验: 异步请求使得页面在数据加载的同时可以保持响应性,提高用户体验。用户不必等待整个页面刷新,而是只更新部分内容。
并发处理: 异步请求支持并发处理多个请求,可以同时向多个资源请求数据,而不需要等待一个请求完成后再发送下一个请求。
实时更新: 异步请求适用于实时更新的场景,例如聊天应用或实时通知系统,用户可以接收到新数据而无需手动刷新页面。
缺点:
复杂性: 异步编程可能会引入复杂性,特别是在处理回调函数、Promise链或async/await时。这可能使得代码难以理解和维护。
错误处理: 错误处理可能变得复杂,因为异步操作可能在不同的时间点返回结果。错误处理需要特别注意,以确保错误能够被捕获和适当处理。
SEO 难度: 搜索引擎优化 (SEO) 对于异步加载的内容的索引可能存在一些挑战。搜索引擎通常更喜欢直接从HTML中获取内容。
场景:一进页面调用接口判断用户是否还有抽奖次数
getLunturnableNums(){
$.ajax({
url: base.xxx + "xxx",
data: {
},
type: 'POST',
success: function (res) {
if (res.code === 200) {
result = true
} else {
result = false
}
},
error: function (err) {
reject(err);
}
})
}
let is_getLunturnableNums = getLunturnableNums()
这里获取到的 is_getLunturnableNums为undefined,因为getLunturnableNums 函数本身并不会等待请求完成,而是立即返回一个 undefined 值。
解决方案:
1.同步请求:
getLunturnableNums(){
$.ajax({
url: base.xxx + "xxx",
data: {
},
type: 'POST',
async: false, // 同步请求
success: function (res) {
if (res.code === 200) {
result = true
} else {
result = false
}
},
error: function (err) {
reject(err);
}
})
}
let is_getLunturnableNums = getLunturnableNums()
优化方案:异步请求
getLunturnableNums() {
return new Promise((resolve, reject) => {
var mis = mise();
$.ajax({
url: base.xxxi + "xxx",
data: {
},
type: 'POST',
success: function (res) {
if (res.code === 200) {
resolve(true);
} else {
resolve(false);
}
},
error: function (err) {
reject(err);
}
});
});
}
// 修改为直接返回异步操作结果
async function getLunturnableNumsResult() {
try {
let is_getLunturnableNums = await getLunturnableNums();
return is_getLunturnableNums;
} catch (error) {
throw error;
}
}
// 直接调用获取结果
let is_getLunturnableNums = getLunturnableNumsResult();
console.log(is_getLunturnableNums);