Promise-详解 从入门到放弃

前言

作为ES6中最重要的特性之一,我们有必要掌握并理解透彻。本文将由浅到深,讲解Promise的基本概念与使用方法。

所以Promise 到底个什么

​ 复杂的概念先不讲,我们先简单粗暴地把Promise用一下,有个直观感受。那么第一个问题来了,Promise是什么玩意呢?是一个类?对象?数组?函数?

别猜了,直接打印出来看看吧,console.dir(Promise),就这么简单粗暴。

​ 这么一看就明白了,Promise是一个构造函数,自己身上有allrejectresolve这几个眼熟的方法,原型上有thencatch等同样很眼熟的方法。这么说用Promisenew出来的对象肯定就有thencatch方法喽,没错。

那就new一个康康吧。

var p = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
        console.log('执行完成');
        resolve('随便什么数据');
    }, 2000);
});

Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolvereject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确,按照标准来讲,resolve是将Promise的状态置为 fullfiledreject是将Promise的状态置为rejected。不过在我们开始阶段可以先这么理解,后面再细究概念。

在上面的代码中,我们执行了一个异步操作,也就是setTimeout,2秒后,输出“执行完成”,并且调用resolve方法。

运行代码,会在2秒后输出“执行完成”。注意!我只是 new了一个对象,并没有调用它,我们传进去的函数就已经执行了,这是需要注意的一个细节。所以我们用 Promise的时候一般是包在一个函数中,在需要的时候去运行这个函数,如:

function runAsync(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('执行完成');
            resolve('某些数据');
        }, 2000);
    });
    return p;            
}
runAsync()

这时候你应该有两个疑问

  • 包装这么一个函数有毛线用?

  • ('某些数据');这是干毛的?

我们继续来讲。在我们包装好的函数最后,会returnPromise对象,也就是说,执行这个函数我们得到了一个Promise对象。还记得Promise对象上有thencatch方法吧?这就是强大之处了,看下面的代码:

runAsync().then(function(data){
    console.log(data);
    //后面可以用传过来的数据做些其他操作
    //......
});

​ 在runAsync()的返回上直接调用then方法,then接收一个参数,是函数,并且会拿到我们在runAsync中调用resolve时传的的参数。运行这段代码,会在2秒后输出“执行完成”,紧接着输出“随便什么数据”。

​ 这时候你应该有所领悟了,原来then里面的函数就跟我们平时的回调函数一个意思,能够在runAsync这个异步任务执行完成之后被执行。这就是Promise的作用了,简单来讲,就是能把原来的回调写法分离出来,在异步操作执行完后,用链式调用的方式执行回调函数。

​ 你可能会不屑一顾,那么牛逼轰轰的Promise就这点能耐?我把回调函数封装一下,给runAsync传进去不也一样吗,就像这样:

function runAsync(callback){
    setTimeout(function(){
        console.log('执行完成');
        callback('某些数据');
    }, 2000);
}

runAsync(function(data){
    console.log(data);
});

​ 效果也是一样的,还费劲用Promise干嘛。那么问题来了,有多层回调该怎么办?如果callback也是一个异步操作,而且执行完后也需要有相应的回调函数,该怎么办呢?总不能再定义一个callback2,然后给callback传进去吧。而Promise的优势在于,可以在then方法中继续写Promise对象并返回,然后继续调用then来进行回调操作。

链式操作的用法

​ 所以,从表面上看,Promise只是能够简化层层回调的写法,而实质上,Promise的精髓是“状态”,用维护状态、传递状态的方式来使得回调函数能够及时调用,它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的:

runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return runAsync3();
})
.then(function(data){
    console.log(data);
});

​ 这样能够按顺序,每隔两秒输出每个异步回调中的内容,在runAsync2中传给resolve的数据,能在接下来的then方法中拿到。运行结果如下:

// 异步任务1执行完成
// 得到某些数据1
// 异步任务2执行完成
// 得到某些数据2
// 异步任务3执行完成
// 得到某些数据3

猜猜runAsync1runAsync2runAsync3这三个函数都是如何定义的?没错,就是下面这样:

function runAsync1(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务1执行完成');
            resolve('得到某些数据1');
        }, 1000);
    });
    return p;            
}
function runAsync2(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务2执行完成');
            resolve('得到某些数据2');
        }, 2000);
    });
    return p;            
}
function runAsync3(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务3执行完成');
            resolve('得到某些数据3');
        }, 2000);
    });
    return p;            
}

​ 在 then方法中,你也可以直接 return数据而不是 Promise对象,在后面的 then中就可以接收到数据了,比如我们把上面的代码修改成这样:

runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return '直接返回的数据';  //这里直接返回数据
})
.then(function(data){
    console.log(data);
});

那么输出就变成了这样:

// 异步任务1执行完成
// 得到某些数据1
// 异步任务2执行完成
// 得到某些数据2
// 直接返回的数据

reject的用法

​ 到这里,你应该对“Promise是什么玩意”有了最基本的了解。那么我们接着来看看ES6 的Promise还有哪些功能。我们光用了resolve,还没用reject呢,它是做什么的呢?事实上,我们前面的例子都是只有“执行成功”的回调,还没有“失败”的情况,reject的作用就是把Promise的状态置为rejected,这样我们在then中就能捕捉到,然后执行“失败”情况的回调。看下面的代码。

function GetNumber(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            var num = Math.ceil(Math.random()*10); //生成1-10的随机数
            if(num<p>​    <code>GetNumber</code>函数用来异步获取一个数字,2秒后执行完成,如果数字小于等于5,我们认为是“成功”了,调用<code>resolve</code>修改<code>Promise</code>的状态。否则我们认为是“失败”了,调用<code>reject</code>并传递一个参数,作为失败的原因。</p>
<p>​    运行<code>GetNumber</code>并且在<code>then</code>中传了两个参数,<code>then</code>方法可以接受两个参数,第一个对应<code>resolve</code>的回调,第二个对应<code>reject</code>的回调。所以我们能够分别拿到他们传过来的数据。多次运行这段代码,你会随机得到下面两种结果:</p>

resolved 1

<p>​    或者</p>

rejected 数字太大了

<h2 class="heading" data-id="heading-5">catch的用法</h2>
<p>​    我们知道<code>romise</code>对象除了then方法,还有一个<code>catch</code>方法,它是做什么用的呢?其实它和<code>then</code>的第二个参数一样,用来指定<code>reject</code>的回调,用法是这样:</p>

getNumber() .then(function(data){ console.log('resolved'); console.log(data); }) .catch(function(reason){ console.log('rejected'); console.log(reason); });

<p>​    效果和写在<code>then</code>的第二个参数里面一样。不过它还有另外一个作用:在执行<code>resolve</code>的回调(也就是上面then中的第一个参数)时,如果抛出异常了(代码出错了),那么并不会报错卡死<code>js</code>,而是会进到这个<code>catch</code>方法中。请看下面的代码:</p>

getNumber() .then(function(data){ console.log('resolved'); console.log(data); console.log(somedata); //此处的somedata未定义 }) .catch(function(reason){ console.log('rejected'); console.log(reason); });

<p>​    在resolve的回调中,我们<code>console.log(somedata);</code>而<code>somedata</code>这个变量是没有被定义的。如果我们不用<code>Promise</code>,代码运行到这里就直接在控制台报错了,不往下运行了。但是在这里,会得到这样的结果:</p>

resolved 4 rejected ReferenceError: somedata is not defined(...)

<p>​    也就是说进到<code>catch</code>方法里面去了,而且把错误原因传到了<code>reason</code>参数中。即便是有错误的代码也不会报错了,这与我们的<code>try/catch</code>语句有相同的功能。</p>
<h2 class="heading" data-id="heading-6">all的用法</h2>
<p><code>Promise</code>的 <code>all</code> 方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调。我们仍旧使用上面定义好的 <code>runAsync1</code>、<code>runAsync2</code>、<code>runAsync3</code>这三个函数,看下面的例子:</p>

Promise .all([runAsync1(), runAsync2(), runAsync3()]) .then(function(results){ console.log(results); });

<p>​    用<code>Promise.all</code>来执行,<code>all</code>接收一个数组参数,里面的值最终都算返回<code>Promise</code>对象。这样,三个异步操作的并行执行的,等到它们都执行完后才会进到then里面。那么,三个异步操作返回的数据哪里去了呢?都在then里面呢,<code>all</code>会把所有异步操作的结果放进一个数组中传给<code>then</code>,就是上面的<code>results</code>。所以上面代码的输出结果就是:</p>

// 异步任务1执行完成 // 异步任务2执行完成 // 异步任务3执行完成 // ["得到某些数据1","得到某些数据2","得到某些数据3"]

<p>​    有了<code>all</code>,你就可以并行执行多个异步操作,并且在一个回调中处理所有的返回数据,是不是很酷?有一个场景是很适合用这个的,一些游戏类的素材比较多的应用,打开网页时,预先加载需要用到的各种资源如图片、<code>flash</code>以及各种静态文件。所有的都加载完后,我们再进行页面的初始化。</p>
<h2 class="heading" data-id="heading-7">race的用法</h2>
<p>​    <code>all</code>方法的效果实际上是「谁跑的慢,以谁为准执行回调」,那么相对的就有另一个方法「谁跑的快,以谁为准执行回调」,这就是<code>race</code>方法,这个词本来就是赛跑的意思。<code>race</code>的用法与<code>all</code>一样,我们把上面<code>runAsync1</code>的延时改为1秒来看一下:</p>

Promise .race([runAsync1(), runAsync2(), runAsync3()]) .then(function(results){ console.log(results); });

<p>​    这三个异步操作同样是并行执行的。结果你应该可以猜到,1秒后<code>runAsync1</code>已经执行完了,此时<code>then</code>里面的就执行了。结果是这样的:</p>

// 异步任务1执行完成 // 随便什么数据1 // 异步任务2执行完成 // 异步任务3执行完成

<p>​    你猜对了吗?不完全,是吧。在<code>then</code>里面的回调开始执行时,<code>runAsync2()</code>和<code>runAsync3()</code>并没有停止,仍旧再执行。于是再过1秒后,输出了他们结束的标志。</p>
<p>​    这个<code>race</code>有什么用呢?使用场景还是很多的,比如我们可以用<code>race</code>给某个异步请求设置超时时间,并且在超时后执行相应的操作,代码如下:</p>

//请求某个图片资源 function requestImg(){ var p = new Promise(function(resolve, reject){ var img = new Image(); img.onload = function(){ resolve(img); } img.src = 'xxxxxx'; }); return p; }

//延时函数,用于给请求计时 function timeout(){ var p = new Promise(function(resolve, reject){ setTimeout(function(){ reject('图片请求超时'); }, 5000); }); return p; }

Promise .race([requestImg(), timeout()]) .then(function(results){ console.log(results); }) .catch(function(reason){ console.log(reason); });

<p><code>requestImg</code>函数会异步请求一张图片,我把地址写为<code>"xxxxxx"</code>,所以肯定是无法成功请求到的。<code>timeout</code>函数是一个延时5秒的异步操作。我们把这两个返回<code>Promise</code>对象的函数放进<code>race</code>,于是他俩就会赛跑,如果5秒之内图片请求成功了,那么遍进入<code>then</code>方法,执行正常的流程。如果5秒钟图片还未成功返回,那么<code>timeout</code>就跑赢了,则进入<code>catch</code>,报出“图片请求超时”的信息。运行结果如下:</p>

file:///C:/wamp/www/test/promise/xxxxxx net::ERR_FILE_NOT_FOUND 图片资源请求超时

```

总结

ES6 Promise的内容就这些吗?是的,能用到的基本就这些。

我怎么还见过donefinallysuccessfail等,这些是啥?这些并不在Promise标准中,而是我们自己实现的语法糖。

想看更多精彩内容,请关注“悲伤日记”!

原文链接:juejin.im

上一篇:函数式组件 &amp;&amp; React Hook
下一篇:对比Webpack,使用Babel+Node实现一个100行的小型打包工具

相关推荐

  • 🔥 Promise|async|Generator 实现&amp;原理大解析 | 9k字

    笔者刚接触async/await时,就被其暂停执行的特性吸引了,心想在没有原生API支持的情况下,await居然能挂起当前方法,实现暂停执行,我感到十分好奇。好奇心驱使我一层一层剥开有关JS异步编程的...

    12 天前
  • 鸡啄米:C++编程入门系列之前言

    从今天开始将给大家讲解一些C编程入门的知识,对于也是个温习巩固的过程。将会用深入浅出的方式,尽量用最简单的语言让读者学会C语言,并爱上这门语言。         本前言讲述的是编程语言的发展过程、面...

    11 天前
  • 面试必备之详解JS数字精度

    clipboard.png(/public/upload/aa0b30d7a463ed0c795e008c1f49a94d) 0.前言 最近在看计算机组成原理的浮点数部分,突然想起之前看过的一...

    2 个月前
  • 静态类型检测器—Flow入门

    介绍 一个 JAVASCRIPT 静态类型检测器 Flow 使用类型接口查找错误,甚至不需要任何类型声明。 它也能够准确地跟踪变量的类型,就像运行时那样 Flow 专为 JavaSc...

    2 年前
  • 静态类型检查—Flow入门

    介绍 一个 JAVASCRIPT 静态类型检测器 Flow 使用类型接口查找错误,甚至不需要任何类型声明。 它也能够准确地跟踪变量的类型,就像运行时那样 Flow 专为 JavaSc...

    2 年前
  • 阅读Promise A+规范

    本文主要是PromiseA规范(https://promisesaplus.com/)的翻译加上个人的理解。 1 什么是Promise A promise represents the eve...

    2 年前
  • 通过npm引用的vue组件使用详解

    什么是组件:组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。

    3 年前
  • 通过koa2和Promise.race()构造一个超时取消的ajax。

    MDN上说: 你可以使用AbortController.AbortController()构造函数创建一个新的AbortController对象。 使用AbortSignal 对象完成与DOM请求...

    1 年前
  • 通过Iterator控制Promise.all的并发数

    背景 异步是 js 一个非常重要的特性,但很多时候,我们不仅仅想让一系列任务并行执行,还想要控制同时执行的并发数,尤其是在针对操作有限资源的异步任务,比如文件句柄,网络端口等等。 看一个例子。

    5 个月前
  • 通过 Web 控制蓝牙设备:WebBluetooth入门

    翻译:疯狂的技术宅 原文:https://www.smashingmagazine....(https://www.smashingmagazine.com/2019/02/introductio...

    1 年前

官方社区

扫码加入 JavaScript 社区