Javascript 异步编程-基本篇

2024年3月7日 137次阅读 来源: 止水

在前端这个范畴内里，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异步编程-耽误对象篇

    原文作者：止水
    原文地址: https://segmentfault.com/a/1190000007762534
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞