Javascript 异步编程-基础篇

huaixiaoz 发布于2019-08-22 10:49 / 3558人阅读

摘要：在前端这个领域里面，请求非常常见，相信每一个前端都写过下面的代码前提引入上面这段代码中的和被称为回调函数。多个请求希望有一个共同的回调响应继续使用最初的方法，假设有多个请求，希望在全部完成后执行回调函数。异步编程延迟对象篇

在前端这个领域里面，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://www.ucloud.cn/yun/91317.html

ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
JS笔记

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。异步编程入门的全称是前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。 TypeScript 入门教程从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。网络基础知识之 HTTP 协议详细介绍 HTT...

rottengeek 2019-08-22 13:58 评论0 收藏0
javascript知识点

摘要：模块化是随着前端技术的发展，前端代码爆炸式增长后，工程化所采取的必然措施。目前模块化的思想分为和。特别指出，事件不等同于异步，回调也不等同于异步。将会讨论安全的类型检测惰性载入函数冻结对象定时器等话题。 Vue.js 前后端同构方案之准备篇——代码优化目前 Vue.js 的火爆不亚于当初的 React，本人对写代码有洁癖，代码也是艺术。此篇是准备篇，工欲善其事，必先利其器。我们先在代...

Karrdy 2019-08-26 11:34 评论0 收藏0
JavaScript 异步编程

摘要：下面我将介绍的基本用法以及如何在异步编程中使用它们。在没有发布之前，作为异步编程主力军的回调函数一直被人诟病，其原因有太多比如回调地狱代码执行顺序难以追踪后期因代码变得十分复杂导致无法维护和更新等，而的出现在很大程度上改变了之前的窘境。前言自己着手准备写这篇文章的初衷是觉得如果想要更深入的理解 JS，异步编程则是必须要跨过的一道坎。由于这里面涉及到的东西很多也很广，在初学 JS 的...

lordharrd 2019-08-23 12:26 评论0 收藏0
前端基础

摘要：谈起闭包，它可是两个核心技术之一异步基于打造前端持续集成开发环境本文将以一个标准的项目为例，完全抛弃传统的前端项目开发部署方式，基于容器技术打造一个精简的前端持续集成的开发环境。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老鸟，不论是面试求职，还是日...

graf 2019-08-21 18:38 评论0 收藏0