脚本宝典收集整理的这篇文章主要介绍了

Javascript 异步编程-基础篇

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

在前端这个领域里面,ajax请求非常常见,相信每一个前端er都写过下面的代码:

// 前提引入jquery

$.ajax({
    type: 'get',
    url: '/path/to/data',
    success: function (response) {
    
    },
    error: function (errMsg) {

    }
})

上面这段代码中的success和error被称为回调函数。基于js异步IO的特点,代码的意思就是在ajax请求成功之后,执行success函数,而在ajax失败时,执行error函数。

然而在有些情况下,业务逻辑可能需要我们产生多个success状态下的回调函数,或者多个ajax请求同时发送,全部success状态后执行回调,这样的方法就显得有些捉襟见肘。

1. 单次ajax请求有多个回调响应

// 使用上面的方法,有如下两种业务逻辑

$.ajax({
    type: 'get',
    url: '/path/to/data',
    success: function (response) {
        // todo
        
        successCallback2(response);
        successCallback3(response);
    }
})

继续使用上面的写法,就会让回调进行嵌套,如果需要在successCallback2完成后继续回调,就要一层一层的嵌套。代码不是纵向发展,而是横向发展,这就是js中的回调地狱。

2. 多个ajax请求希望有一个共同的回调响应

// 继续使用最初的方法,假设有多个ajax请求,希望在全部完成后执行回调函数。

function fetchData (url, successCb, errorCb) {
    return function () {
        $.ajax({
            type: 'get',
            url: url,
            success: successCb,
            error: errorCb
        });
    }
}

function successCb () {
    console.log('success');
}

function errorCb () {
    console.log('error');
}

var fetchData1 = fetchData('/path/to/data1', successCb, errorCb);
var fetchData2 = fetchData('/path/to/data2', successCb, errorCb);

如果有两个相同的fetch data的操作,如果我们希望能够并行操作的话,只能重写fetchData1

var fetchData1 = fetchData('/path/to/data1', fetchData2, errorCb);

fetchData1();

这种写法实际上是在fetchData1成功后进行fetchData2操作的,并不是严格意义上的并行操作,之后在fetchData2的success状态的回调中,我们可以获得两次ajax请求的返回值。

这样的代码是不完美的,在如今大家都在追求webpack+es6+babel的技术栈时,也应该想想,如何从最基本的代码中提升生产力和代码的可维护性。

在发现了代码在业务中的痛点之后,就要想办法去解决它。好在如今前端百花齐放,这样的问题早已有多种成熟的解决方案,接下来的几篇文章,就由浅入深详细的讲讲这些异步方案中的实现方法和代码原理,并且每一种方法本人都实现了一个tiny版。所有文章代码都开源在github上,如果有任何问题或者建议甚至是错误,都可以在github中提issue给我。欢迎大家热烈讨论。

下一篇开始,着重介绍具体从Deferred对象解决上述两种问题,有兴趣的同学继续看下去吧。Javascript异步编程-延迟对象篇

总结

以上是脚本宝典为你收集整理的

Javascript 异步编程-基础篇

全部内容,希望文章能够帮你解决

Javascript 异步编程-基础篇

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过