博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
聊一聊Javascript中的Promise对象
阅读量:5923 次
发布时间:2019-06-19

本文共 4319 字,大约阅读时间需要 14 分钟。

是什么

先直接上图,打印一下Promise对象,观察下Promise是什么

1console.dir(Promise)复制代码
Promise对象

可以知道,Promise是一个构造函数,有着reject、resolve函数。prototype有then、catch等方法,说明了只要是Promise对象都会有这两个方法。

Promise构造函数是传入一个函数

怎么用

1var promise = new Promise((resolve, reject) => {2    setTimeout(function () {3        console.log('执行完成');4        resolve('随便什么数据');5    }, 2000);6});78result:9执行完成复制代码

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

运行以上代码,发现promise并没有调用,只是new了一个Promise,对应的传入函数的代码就已经执行了。因此,我们通常都是把Promise包在一个函数中,在需要的时候才去运行这个函数,如:

1function f() { 2    var promise = new Promise((resolve, reject) => { 3        setTimeout(function () { 4            console.log('执行完成'); 5            resolve('随便什么数据'); 6        }, 2000); 7    }); 8    return promise 9}1011f()1213result:14执行完成复制代码

这时引出两个问题。为什么需要大费周章的包装这样的一个函数?resolve有什么用?

为什么需要引入

1f().then(function(data){2    console.log(data);3    //后面可以用传过来的数据做些其他操作4    //......5});复制代码

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

这时,我们恍然大悟了,原来then调用的function相当于我们之前写的回调函数,相当于是这种形式:

1function runAsync(callback){ 2    setTimeout(function(){ 3        console.log('执行完成'); 4        callback('随便什么数据'); 5    }, 2000); 6} 7 8runAsync(function(data){ 9    console.log(data);10});复制代码

那使用Promise有什么好处呢?我们不妨考虑一个问题,如果callback函数也是一个异步操作,而且执行完后也需要有相应的回调函数,可能会变成 runAsync(function(data,function(data){}){…..})。看起来十分丑陋,假如使用Promise代码就不会这么丑陋了~

Promise的优势在于,可以在then方法中继续写Promise对象并返回,然后继续调用then来进行回调操作。

链式操作的用法

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

1runAsync1() 2.then(function(data){ 3    console.log(data); 4    return runAsync2(); 5}) 6.then(function(data){ 7    console.log(data); 8    return runAsync3(); 9})10.then(function(data){11    console.log(data);12});131415function runAsync1(){16    var p = new Promise(function(resolve, reject){17        //做一些异步操作18        setTimeout(function(){19            console.log('异步任务1执行完成');20            resolve('随便什么数据1');21        }, 1000);22    });23    return p;            24}25function runAsync2(){26    var p = new Promise(function(resolve, reject){27        //做一些异步操作28        setTimeout(function(){29            console.log('异步任务2执行完成');30            resolve('随便什么数据2');31        }, 2000);32    });33    return p;            34}35function runAsync3(){36    var p = new Promise(function(resolve, reject){37        //做一些异步操作38        setTimeout(function(){39            console.log('异步任务3执行完成');40            resolve('随便什么数据3');41        }, 2000);42    });43    return p;            44}4546result:47异步任务1执行完成48随便什么数据149异步任务2执行完成50随便什么数据251异步任务3执行完成52随便什么数据3复制代码

我们可以通过链式编程避免了包含多函数回调的情况,当然并不是都需要return Promise对象,你也可以返回其他数据类型,在后面的then中就能直接直接接收到数据了,比如:

1runAsync1() 2.then(function(data){ 3    console.log(data); 4    return runAsync2(); 5}) 6.then(function(data){ 7    console.log(data); 8    return '直接返回数据';  //这里直接返回数据 9})10.then(function(data){11    console.log(data);12});1314result:15异步任务1执行完成16随便什么数据117异步任务2执行完成18随便什么数据219直接返回数据复制代码

reject用法

前面我们一直都是使用resolve函数,并没有使用reject函数。resolve函数是表示了“执行成功”的回调,reject函数表示“执行失败”的函数。

1function runAsync1() { 2    var p = new Promise(function (resolve, reject) { 3        //做一些异步操作 4        setTimeout(function () { 5            console.log('异步任务1执行完成'); 6            // resolve('随便什么数据1'); 7            reject("error") 8        }, 1000); 9    });10    return p;11}1213runAsync1().then((data) => {14    console.log('resolve');15    console.log(data)16}, (error, data) => {17    console.log('rejected');18    console.log(error)19})2021result:22异步任务1执行完成23rejected24error复制代码

需要注意的是,只要执行reject或者resolve,后面的就不会执行了,如:

1function runAsync1() { 2    var p = new Promise(function (resolve, reject) { 3        //做一些异步操作 4        setTimeout(function () { 5            console.log('异步任务1执行完成'); 6            resolve('随便什么数据1'); 7            reject("error") 8        }, 1000); 9    });10    return p;11}复制代码

因为resolve在reject的前面,所以只会执行resolve,不会执行reject。

总结

  • Promise是一个对象
  • 引入是为了消除多重回调函数
  • Promise还有很多方法没有介绍(catch、finally、success、fail)

参考文献

房清

广州芦苇科技Java开发团队

芦苇科技-广州专业互联网软件服务公司

抓住每一处细节 ,创造每一个美好

关注我们的公众号,了解更多

想和我们一起奋斗吗?lagou搜索“ 芦苇科技 ”或者投放简历到 server@talkmoney.cn 加入我们吧

关注我们,你的评论和点赞对我们最大的支持

转载地址:http://fgivx.baihongyu.com/

你可能感兴趣的文章
【leetcode】486. Predict the Winner
查看>>
初见jQuery EasyUI
查看>>
再springMVC中自定义文件上传处理解决与原spring中MultipartResolve冲突问题
查看>>
struts2文件上传,文件类型 allowedTypes
查看>>
mysql的分区和分表
查看>>
Azure系列2.1.9 —— CloudBlob
查看>>
数组与指针的区别
查看>>
01布尔模型&倒排索引
查看>>
Mysql 锁机制和事务
查看>>
MySQL之自定义函数实例讲解
查看>>
Hibernate错误:javax/persistence/EntityListeners
查看>>
Firefox --- 火狐浏览器下载
查看>>
用程序按要求分析考试结果
查看>>
用.htaccess获取文件夹和文件名
查看>>
Javascript操作Dom对象
查看>>
关于主席树的入门,讲解和题单
查看>>
python 初学函数
查看>>
职责链模式(chain of responsibility Pattern)
查看>>
Log4net
查看>>
C++ 内存分配(new,operator new)面面观 (转)
查看>>