美文网首页前端实用主义Web前端之路Vue.js专区
实用主义:Promise让异步回调更加优雅

实用主义:Promise让异步回调更加优雅

作者: Mr_Treasure | 来源:发表于2017-01-28 15:21 被阅读1933次

前言

函数作为一等对象,使得javascript这种弱类型,单线程脚本语言的异步方法极为方便,只需要一个callback,编译器就能按照我们的想法执行命令。如果只有一个简单的异步操作,我们可以稍费脑子理清执行顺序,但是如果有多个异步方法,呃,我们就可能掉进了回调陷阱,事情远远没有我们想到的那么简单,并且我们甚至还没考虑过异步中抛出的错误。

还好Promise的出现,解救了我们,这篇文章不是讲解Promise的详细使用方法,只是通过两个例子,看看Promise的优雅之处,详细资料请参考阮一峰老师 《ES6标准入门》

传统的ajax回调

代码运行于最新的Chrome版本中,Chrome目前已支持除 模块 以外的大部分ES6方法

let xhr = new XMLHttpRequest();
    let url = 'http://chat.hstar.org:8601/rkyNA2Yvl/promise';
    xhr.responseType = "text";
    xhr.open('get', url, true);
    xhr.onreadystatechange = ((data) => {
        if (xhr.readyState===4 && xhr.status===200) {
                let data = JSON.parse(xhr,responseText);
                console.log(data.word);
        }
    });
    xhr.send(null);
结果
这是一个传统的ajax回调,我们把所有事务逻辑封装在onreadystatechange事件中,并且xhr的生成与使用都在一块代码内。后期的维护、DOM操作都只能该事件中进行,这只是一个异步事件,如果是多个异步事件,并且需要所有事件都能完成才能操作。Oh my god。我们可能已经进入回调地狱。这团代码在后期debug时候足以让我们抓狂。

Promise的出现

我们再来看看一段经过Promise封装的代码

function getPromise(url) {
        let p = new Promise((resolve,reject) => {
          let xhr = new XMLHttpRequest;
          xhr.open('get', url, true);
          xhr.onreadystatechange = () => {
            if (xhr.status == 200 && xhr.readyState===4 ){
                resolve(xhr.responseText);
                }   
            };
            xhr.onerr = function () {
                    reject();
            }
            xhr.send(null);
        });
        return p;
}

首先封装一个Promise对象,我们把响应事件封装在resolve方法中,如果仅仅是这样,那么和普通封装没有区别,我们接着来看看Promise的优雅之处

let promise = getPromise('http://chat.hstar.org:8601/rkyNA2Yvl/promise');
    promise.
    then(data => {
        data = JSON.parse(data);
        return data;
    }).then(data => {
        document.write(data.word);
        console.log(data);
    }).catch(err => {
        console.log(err);
    });
结果

我们通过then(resolve方法的别名),进行回调操作,then方法返回的也是一个Promise对象,因此可以链式调用,这样我们可以按步骤操作返回的数据。并且catch方法会捕捉每一个异步方法中的错误,所有的错误都会冒泡到这里,如果catch方法出现了错误怎么办?别担心done()方法会处理最后的错误。
通过这样的链式调用,使得 关注点 分离,return的形式也更符合人脑的思考逻辑。
前面还提到了多个异步操作,我们同样可以使用Promise.all和Promise.race方法。

最后

相比传统的ajax方法,Promise的优雅之处在于

  1. 关注点分离,每一次调用只需要完成一个任务;
  2. 更符合人脑思考逻辑;
  3. 良好的错误处理逻辑,错误冒泡;
  4. all() 和 race()方法避免陷入回调地狱

这里仅仅是简单封装了XMLHttpRequest方法,随着JS的发展,fetch axios vue-resource等新一代ajax方法都已经实现了对Promise的封装,这里也该大家分享一段我们项目对Promise的深度封装实现(基于axios)

基于axios的封装

所以大家也快来拥抱ES6的新特性吧
就是这样:)

相关文章

  • 实用主义:Promise让异步回调更加优雅

    前言 函数作为一等对象,使得javascript这种弱类型,单线程脚本语言的异步方法极为方便,只需要一个callb...

  • 手写一个符合Promise/A+规范的Promise

    Promise的基本概念: Promise使异步脱离了回调地狱,可以更优雅的操作异步函数的执行结果。究其根本,不过...

  • JavaScript异步编程:(五)async与await

    前言 上文讲了Promise,它在回调函数的基础上,优化了回调的结构,链式结构让多个异步任务的调用更加方便,但是多...

  • Angular $q

    $q采用的是promise式的异步编程.什么是promise异步编程呢?异步编程最重要的核心就是回调,因为有回调函...

  • 个人笔记

    同步/异步 回调函数=> 回调地狱 setInterval/setTimeout =>Promise=>Gener...

  • ES6--Promise

    Promise解决异步回调的问题 Promise.all和Promise.race

  • 异步的实现

    异步的三种实现方式: 回调函数事件Promise 回调函数 回调函数不一定是异步 但是异步一定是回调函数。 事件 ...

  • js的三种异步处理

    Promise 对象 含义: Promise是异步编程的一种解决方案, 优点: 相比传统回调函数和事件更加合理和优...

  • 04-Node 异步编程

    Node 异步编程同步方法和异步方法异步 API 的执行顺序异步编程回调地狱问题Promise 改造回调地狱代码a...

  • node 异步编程

    回调函数方式缺点:回调地狱、异步并发控制困难 Promise Async / Await

网友评论

    本文标题:实用主义:Promise让异步回调更加优雅

    本文链接:https://www.haomeiwen.com/subject/wasqittx.html