Promise实践
一、概念
Promise是异步编程的解决方案之一,与事件驱动+回调函数并列。
Promise是专门为异步编程设计的封闭的一次性用品,封闭体现在只有异步操作的结果能改变其状态,其他任何操作都不能改变其状态。一次性体现在一旦新建就会运行而且一旦状态改变,就不会再改变。
注意1:调用resolve或reject并不会中止Promise内代码的执行,不管是同步还是异步代码,就算是ajax这种异步操作,将这些异步操作添加到事件循环的末尾的动作也是同步的。但是理论上来说,resolve和reject调用之后Promise的状态一定会改变,根据它一次性的特点,它已经没有意义了,后面不应该有代码,可以在resolve和reject前加上return,这样它们后面的代码就不会执行了。
注意2:Promise会吃掉错误,Promise内部发生的语法错误不影响外部代码的执行。这也体现出Promise是真的封闭
二、语法
const promise = new Promise(function(resolve,reject){
// asynchronous code
if(/*success*/){
resolve(value);
}else{
reject(error);
}
});
进阶用法1:resolve或reject的参数是一个promise,这个参数的promise将决定外部promise的状态
const p1 = new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('fail')), 3000)
})
const p2 = new Promise(function (resolve, reject) {
setTimeout(() => resolve(p1), 1000)
})
p2
.then(result => console.log(result))
.catch(error => console.log(error))
//Error:fail
进阶用法2:then和catch可以链式调用,返回一个新的Promise实例,如果在then中不显式返回一个promise实例,then会将你return的data(字符串啊什么的)当做默认promise对象的resolve的参数,并执行resolve(data)
进阶用法3:catch(error)是then(null,function(error))的别名,除了处理rejected状态,还可以捕获Promise中抛出的错误。
经测试,then中的reject处理函数也能捕获promise中抛出的错误,可以说,reject函数的作用等同于抛出错误。
错误具有冒泡性质,总会被后面的catch捕获。推荐使用catch代替then的第二个参数。
三、实例:https://github.com/WHITE-ILMARE/Front-End-Learning-Demos/tree/master/ES6/promise
1.控制最基础的异步——setTimeout();
2.对单个Ajax请求的控制
3.Promise.all:各个子Promise的结果会存储在数组中作为外部Promise实例resolved的参数。
若子Promise有catch方法,就调用自己的catch,若没有,就调用外部Promise实例的catch方法。就语义上来说,这样做阻止了子Promise的一次reject导致多次catch,比较有意义。可以根据需要,决定统一处理rejected还是定制化处理rejected。
四、理解
写了几个Promise实例,Promise的优点在哪?
1.形式上,想一下jquery中的$.get(url,callback(data)),如果用promise,可以写成new Promise(function(...){$.get(url,resolve(data))}).then(data),就是把传统的回调函数掏出来写在外边了,听说这是同步的写法,我还不明白什么叫同步的写法,没有回调就是同步的写法??总而言之,就是形式上的简化。
2.理解方式上,我在读了ES6 JavaScript Promise的感性认知« 张鑫旭-鑫空间-鑫生活 - zhangxinxu这篇文章后想到,将回调函数的写法转换成promise.then().then()这种写法易于让人读懂代码,更容易理解代码。因为这种写法代表一种逻辑,应该就是上一条说的同步的逻辑,更符合现实世界人们的思维方式,所以便于理解,提高了代码可读性和结构。
Promise实践的更多相关文章
- jquery的promise实践--连续加载图片
在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能. 现在就更进一步,完成一个能够一张一张的连续图片加载的功能. 功能: 1.一张一张加载图片. 2.加载错误, ...
- 一次Promise 实践:异步任务的分组调度
起因是在工作中遇到一个问题,可以用一个二维数组简单描述: [[1,2,3],[4,5,6],[7,8,9]] 这里每个数字都代表“一个异步计算任务”, 每个子数组把1个或多个计算任务划分成组,要求是: ...
- javascript中的promise和deferred:实践(二)
javascript中的promise和deferred:实践(二) 介绍: 在第一节呢,我花了大量的时间来介绍promises和deferreds的理论.现在呢,我们来看看jquery中的promi ...
- javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
- vue实践---vue结合 promise 封装原生ajax
有时候不想使用axios这样的外部依赖,想自己封装ajax,这里有两种方法 方法一,在单个页面内使用 封装的代码如下: beforeCreate () { this.$http = (() => ...
- ES6之Promise学习与实践
1.前言 在平时的业务开发中,前端通常需要请求后台获取数据,或者NodeJs读取文件等等一系列的异步操作,我们通常需要利用异步操作的结果或者对异步操作的结果进行处理.通常我们的解决方案是:在异步操作成 ...
- Promise最佳实践(转)
本文作者:IMWeb dekuchen 原文出处:IMWeb社区 未经同意,禁止转载 有关Promise的几个问题 基础概念 一:什么是Promise 国内比较流行的看法: 阮一峰: Promise ...
- Promise里捕捉错误的最佳实践
Promise里的同步部分不需要try catch new Promise((resolve, reject) => { throw new Error('error'); setTimeout ...
- 大白话讲解Promise(二)理解Promise规范
上一篇我们讲解了ES6中Promise的用法,但是知道了用法还远远不够,作为一名专业的前端工程师,还必须通晓原理.所以,为了补全我们关于Promise的知识树,有必要理解Promise/A+规范,理解 ...
随机推荐
- Linux rhcsa认证考试试题模拟
声明: 此套试题是2017年rhcsa考试题库,本题库需配合相对应的机器操作,实验环境在我的网盘下载 考试环境: server.group8.example.com 172.24.8.254/24 s ...
- 2018-2019-2 20175126谢文航 实验一《Java开发环境的熟悉》实验报告
一.实验报告封面 课程:Java程序设计 班级:1751班 姓名:谢文航 学号:20175126 指导教师:娄嘉鹏 实验日期:2019年3月28日 实验时间:--- 实验序号:实验一 实验名称:Jav ...
- asp.net 下载视频 保存视屏
第一张图片为html,第一站图片为js上传视频并播放,限定大小,第三张图片是将视频保存到以字节流的方式保存到数据中,或者是将视频保存到项目中 String filename=this.Filevide ...
- 内网ssh穿透
公司服务器没有公网IP,只有内网IP,利用自己的阿里云服务器(有公网ip)做ssh内网穿透,使得外网可访问.方法如下: 环境: 公司服务器和阿里云服务器均为 Ubuntu 操作系统, 需要修改阿里云服 ...
- [leetcode]92. Reverse Linked List II反转链表2
Reverse a linked list from position m to n. Do it in one-pass. Note: 1 ≤ m ≤ n ≤ length of list. Exa ...
- 笔记之monkey参数(一)
monkey 参数 参数分类 常规类参数 事件类参数 约束类参数 调试类参数 常规类参数 常规类参数包括帮助参数和日志信息参数.帮助参数用于输出Monkey命令使用指导:日志信息参数将日志分为三个级别 ...
- 控制台 console.write 中文为问号
原因: 因为你当前环境代码页是437,是美国英语的字符编码 解决方式: 你把你环境设置成936就是简体中文字符编码环境了 Console.OutputEncoding = Encoding.GetEn ...
- log4j2.xml日志文件设置文件路径
笔者最近的项目里使用了spring,spring通过web.xml配置监听器,在web启动时web.root系统变量,以供其他变量使用,例如 在属性文件里使用${web.root}以取得完整路径,项目 ...
- [原创]自定义参数静默方式安装JDK1.8
摘要:当Java桌面程序开发完成做产品的时候,面对未知的安装环境,通常是编写一些预安装检测脚本/程序,让程序傻瓜化安装以便减少分发出去的产品带来 的未知工作量(安装答疑,操作系统问题引起安装失败等), ...
- jmeter手写脚本,使用正则获取cookie(禁用cookies管理器)
注:这里以bugfree为例 1.bugfree登录时会有重定向,这会导致每个URL都会有.因此要手动获取cookie的时候,需要去掉重定向勾选 正则获取动态PHPsession 获取到值后,放到信息 ...