Promise对象的基础入门学习
今天来学习下Promise吧!其实这在笔试上也是一个考点。
基本介绍
Promise对象是CommonJS(熟悉的名字吧- -)工作组提出的规范.Promise原本只是社区提出的构想,一些外部函数库率先实现了该功能,ES6中将其写入了语言标准.
目的:为异步操作提供统一接口
Promise是啥,它就是一个javascript中一个对象,起着代理作用,充当异步操作与回调函数之间的中介。
避免类似于
这种嵌套地狱的产生.让我们的代码变得更加简单易读使用了Promise,大家都说好
- (new Promise(f1).then(f2));
总结:Promise使得异步操作的向下发展变成横向发展,程序流程变得清晰,易于阅读。
基本思想
- 异步任务返回一个Promise对象,它有三种状态
1.pending(未完成)
2.resolved,fulfilled(已完成)
3.rejected(失败)
- 它有两种变化途径
1.pending --> resolved/fulfilled
2.pending --> rejected
- 它有两种结果
1.异步操作成功,返回一个值,状态变为resolved
2.异步操作失败,抛出一个错误,状态变为rejected
Promise使用.then()方法添加回调函数,then接收两个回调函数,第一个为成功时的回调函数,另一个为失败时的回调函数.主要为状态改变时调用相对的回调函数.
而且then可以链式调用。
基本使用
Promise构造函数接受一个函数作为参数,而该函数两个参数分别是resolve和reject.它们由JS引擎提供,不需要自己部署.
- Promise(function(resolve,reject){})
resolve函数作用为:将Promise对象从未完成变为成功(Pending->Resolved),异步操作成功时调用,并将异步操作的结果作为参数传递出去.
reject函数作用为:将Promise对象从未完成变为失败(Pending->Rejected),异步操作失败时调用,并将异步操作报出的错误作为参数传递出去.
Promise.then()方法可以用于指定Resolved状态和Reject状态的回调函数.
- promise.then(function(value){//成功+_+!},function(value){//失败Q_Q});
我们只想对异常进行处理时可以采用promise.then(undefined, onRejected)这种方式,或者promise.catch(onRejected)
!注意!此处有坑,接下来在深入节会进行讲解
Promise.all()方法接收一个promise对象的数组为参数,当这个数组中所有的Promise对象全部变成resolve/reject状态的时候,才会调用.then方法,其中传入的promise是同时开始,并行执行的。
- promise.all([promise1,promise2,.....]);
Promise.race()方法和Promise.all()方法一样接收一个promise对象的数组作为参数,但是数组中有一个promise对象进入fulfilled或rejected状态,就会开始后续处理.
- promise.race([promise1,promise2,.....]);
相关的语法糖
- Promise.resolve(42);
- //等价于
- new Promise(function(resolve){
- resolve(42);
- });
- Promise.reject(new Error("出错了"));
- //等价于
- new Promise(function(resolve,reject){
- reject(new Error("出错了"));
- });
深入
关于Thenable对象
这是非常类似于Promise的东西,拥有.then方法.
其中比较经典的例子就是jQuery.ajax()返回的值就是thenable的.
- var promise = Promise.resolve($.ajax('/json/comment.json'));
这样就可以将thenable对象转化为promise对象
传送门:Promise.resolve()
关于promise设计:总是异步操作
看代码就能明白这个地方的问题了.
- var promise = new Promise(function (resolve){
- console.log("inner promise"); // 1
- resolve(42);
- });
- promise.then(function(value){
- console.log(value); // 3
- });
- console.log("outer promise"); // 2
- //结果是
- /*
- inner promise // 1
- outer promise // 2
- 42 // 3
- */
可以看出,即使我们调用promise.then时promise对象已经确定状态,Promise也会以异步的方式调用回调函数,这就是Promise设计上的规定方针.
关于调用then/catch
每次调用then/catch,都会返回一个promise对象,这一点上我们通过使用===就可以判断出来每次promise对象其实都是不一样的
then和catch的错误处理区别
这点和上一点联合起来很容易理解
直接上图吧,来自于JavaScript Promise迷你书(中文版)
在结合我们的代码吧
- // <1> onRejected不会被调用
- function badMain(onRejected) {
- return Promise.resolve(42).then(throwError, onRejected);
- }
- // <2> 有异常发生时onRejected会被调用
- function goodMain(onRejected) {
- return Promise.resolve(42).then(throwError).catch(onRejected);
- }
onFullfilled中发生的错误,如在<1>里面throwError中的错误,是不会导致onRejected的执行(捕获异常)的,我们只能通过后面的catch方法才能捕获.
基本应用
不兼容方面
- 不兼容就是用polyfill吧
- 关于IE8以及以下版本中,catch会由于在ES3中为保留字,导致identifier not found错误,对此我们可以通过["catch"]或者then(undefined,function(){})来进行catch,而某些类库中,采用了caught作为函数名来规避该问题.值得注意的是,有很多压缩工具中自带了.catch转["catch"]
应用示例:
加载图片
- var preloadImage = function(path){
- return new Promise(function(resolve,reject){
- var image = new Image();
- image.onload = resolve;
- image.onerror = reject;
- image.src = path;
- })
- }
- preloadImage("https://dn-anything-about-doc.qbox.me/teacher/QianDuan.png").then(function(){
- alert("图片加载成功");
- },function(){
- alert("图片加载失败");
- })
Ajax操作
- function search(term) {
- var url = 'http://example.com/search?q=' + term;
- var xhr = new XMLHttpRequest();
- var result;
- var p = new Promise(function(resolve, reject) {
- xhr.open('GET', url, true);
- xhr.onload = function(e) {
- if (this.status === 200) {
- result = JSON.parse(this.responseText);
- resolve(result);
- }
- };
- xhr.onerror = function(e) {
- reject(e);
- };
- xhr.send();
- });
- return p;
- }
- search("Hello World").then(console.log, console.error);
回到最初吧,其实Promise对象优点还是在于规范的链式调用,可以清晰看出程序流程.并且对于错误还能定义统一的处理方法。
作者:thewindsword
来源:51CTO
Promise对象的基础入门学习相关推荐
- python 类和对象_Python零基础入门学习33:类与面向对象编程:类的继承
注:本文所有代码均经过Python 3.7实际运行检验,保证其严谨性. 本文字数约1300,阅读时间约为3分钟. Python面向对象编程 类的继承机制 如果一个类A继承自另一个类B,就把继承者类A称 ...
- elementUi基础入门学习
elementUi基础入门学习 1.前后端分离(理解) 1.1什么是前后端分离 1.2 前后端分离开发的理解 1.3 为什么要进行前端分离开发: 2 . 先去搭建前端服务 3 elementui 4 ...
- MAYA 2022基础入门学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,48.0 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.41 GB |时长:4.5小时 包含 ...
- SketchUp Pro 2021基础入门学习视频教程
SketchUp Pro 2021基础入门学习视频教程 1280X720 MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 流派:电子学习|语言:英语+中文字幕( ...
- Maya2022基础入门学习教程
Maya2022基础入门学习教程 Maya 2022 Essential Training Maya2022基础入门学习教程 Maya 2022 Essential Training MP4 |视频: ...
- Blender基础入门学习教程 Learning Blender from Scratch
Blender基础入门学习教程 Learning Blender from Scratch 流派:电子学习| MP4 |视频:h264,1280×720 |音频:aac,48000 Hz 语言:英语+ ...
- 零基础入门学习Python(33)-图形用户界面编程(GUI编程)EasyGui
用户界面编程,即平时说的GUI(Graphical User Interface)编程,那些带有按钮.文本.输入框的窗口的编程 EasyGui是一个非常简单的GUI模块,一旦导入EasyGui模块,P ...
- FreeMarker中文帮助手册API文档,基础入门学习文档
FreeMarker中文帮助手册API文档,基础入门学习文档 分类: 编程技术 发布: bywei 浏览: 7 日期: 2011年5月28日 分享到: QQ空间 新浪微博 腾讯微博 人人网 什么是Fr ...
- python零基础入门教程视频下载-Python零基础入门学习视频教程全42集,资源教程下载...
课程名称 Python零基础入门学习视频教程全42集,资源教程下载 课程目录 001我和Python的第一次亲密接触 002用Python设计第一个游戏 003小插曲之变量和字符串 004改进我们的小 ...
最新文章
- 浅析充分挖掘网站外链发挥SEO优化作用的4点技巧!
- ZooKeeper官方文档资源
- Git基础-获取仓库、提交、查看历史、撤销
- Centos7系统、Hadoop集群上部署ntp服务器
- GDCM:将gz文件转dcm文件测试程序
- 【剑指offer】面试题46. 把数字翻译成字符串(java)
- linux查看文件时显示行号,linux中查看文件时显示行号
- SSO单点登录解决方案[转载]
- linux里车目录是什么意思,linux 命令整理
- 2023天津大学土木水利专业考研成功经验分享
- 超级抠图:Super PhotoCut for Mac
- 从根上理解高性能、高并发(七):深入操作系统,一文读懂进程、线程、协程
- 计算机阴影字 操作步骤,计算机一级Photoshop操作辅导:阴影字
- 【1 - 决策树 - 原理部分】菜菜sklearn机器学习
- 万字博文让我们携手一起走进bs4的世界【python Beautifulsoup】bs4入门 find()与find_all()
- 网站故障和安全事件的应急预案
- 2022.02.11学习总结(kmp)
- Linux下打开chm文件
- 笔记本电脑如何玩游戏不卡顿,提升自己的笔记本性能!开启高性能模式的方法
- 联想thinkpad E470无线网络无法使用问题解决方法