本文讲述了作者从jQuery的$.ajax到Webpack时代，如何逐步深入理解Promise，并使用async/await解决异步嵌套问题。通过示例展示了如何优雅地使用await-to-js库，避免try/catch带来的复杂性，提升代码可读性和维护性。
jQuery的$.ajax
在开始之前我们先来聊聊我的js异步之路。在我还在学校的时候，那时候还是 jQuery 的天下，我直接接触到并且经常使用的异步操作就是网络请求，一手 $.ajax[1] 走天下，伴我过了大二到毕业后差不多大半年的时间。
$.ajax( “/xxx” )
.done(function() {
// success !!! do something…
})
.fail(function() {
// fail !!! do something…
})
.always(function() {
// loading finished…
});
不可否认，$.ajax 这个东西还是挺好使的，在面对大部分场景只有一个请求的情况下，完全胜任甚至觉得很棒
但是有个大大的问题，那就是面对请求链的时候就会特别特别的糟心，比如一个请求依赖于另一个请求的结果，两个可能还无所谓，要是五个八个的，可能想要直接自杀。。。
$.ajax(‘/xxx1’)
.done(function() {
// success !!! do something…
$.ajax(‘/xxx2’)
.done(function() {
// success !!! do something…
$.ajax(‘/xxx3’)
.done(function() {
// success !!! do something…
$.ajax(‘/xxx4’)
.done(function() {
// success !!! do something…
$.ajax(‘/xxx5’)
.done(function() {
// success !!! do something…
// more…
})
.fail(function() {
// fail !!! do something…
})
.always(function() {
// loading finished…
});
})
.fail(function() {
// fail !!! do something…
})
.always(function() {
// loading finished…
});
})
.fail(function() {
// fail !!! do something…
$.ajax(‘/xxx6’)
.done(function() {
// success !!! do something…
$.ajax(‘/xxx7’)
.done(function() {
// success !!! do something…
// more…
})
.fail(function() {
// fail !!! do something…
})
.always(function() {
// loading finished…
});
})
.fail(function() {
// fail !!! do something…
})
.always(function() {
// loading finished…
});
})
.a
最低0.47元/天 解锁文章
扫一扫
680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
