JS promise对象
Promise 承诺
一:promise概念
在js中,promise是一个对象,是专门用来处理异步操作 / 回调地狱的,那么什么是回调地狱?设计到同步和异步任务的知识,在js中,因为js是单线程,无法多并发处理任务,当在js中运行代码时,首先会优先执行同步代码,而异步代码则必须等到同步代码全部执行完才会被执行,那么每个异步代码的加载都需要时间,有快有慢,当我们需求让异步按照我们自己的开发想法来运行,显然需要进行嵌套才能让异步任务有序的按照我们自己的想法执行,就是在这一不断嵌套的过程中,就会形成回调地狱,一不便于管理,代码耦合严重,二代码非常难看,那么promise的出现就解决了这回调地狱的带来的不好的体验。
二:promise的特点
1:在promise中,总共有三种状态,分别是准备中(pending),成功时(resolved)和失败时(rejected)
2:一但创建,状态立即时pending,只有异步返回的结构可以改变其状态,且能能由pending—>resolved 或者 pending -->rejected,没用其他情况
三:promise的语法和方法
(1):使用promise时,需要使用 new 出来
var pms = new Promise(function(resolve,reject){
var i = 3;
if(i>3){
// resolve 表示正确完成时执行的函数
resolve();
}else{
// reject 表示失败时执行的函数
reject();
}
})
// 调用 promise 下的两个回调函数 - then 方法
pms.then(function(){
// 当正确时执行
console.log('执行resolve回调函数');
},function(){
// 当失败时执行
console.log('执行reject回调函数');
})
Promise对象的回调函数下有两个参数,都是回调函数:第一个参数resolved,第二个参数rejected,分别对应成功状态和失败状态,使用then方法来获取返回的结果和状态。
Promise的then 方法:promise对象中用来执行回调函数的方法,then方法接受两个参数,第一个是成功的resolved的回调,另一个是失败rejected的回调
且第二个失败的回调参数可选。并且then方法里也可以返回promise对象。
(2):promise的状态只被执行一次
// promise 状态只能被执行一次
var pms = new Promise(function(resolve,reject){
// 1:在 promise 中 resolve和reject,只能被调用一次,不能同时调用
// 2:当执行resolve或者reject时,这个Promise当中状态就会被修改
resolve(4) // 只执行第一个,后面的不执行
reject(3)
resolve(2)
reject(1)
})
// 调用 promise - then方法
// catch 方法:是promise中执行 promise发生错误时的方法
pms.then(function(num){
console.log(num) //
}).catch(function(num){
console.log(num)
})
使用promise,他的状态要么从pending改变成resolve,要么就是从pending改变成reject,当在promise中调用多次promise对象的回调,只会执行一次。
catch 方法:是promise中执行 promise发生错误时的方法
(3):promise的resolve和reject方法
// Promise.resolve() 方法:直接执行Promise的resolve方法,并且传入参数
// 返回一个Promise对象,状态为resolve
// pmsRes 的状态为 resolve
var pmsRes = Promise.resolve(3).then(function(num){
console.log(num); //
}) // Promise.reject() 方法:直接执行Promise的reject方法,并且传入参数
// 返回一个Promise对象,状态为rejected
// pmsRes 的状态为 reject
var pmsRej = Promise.reject(1).then(function(num){
console.log(num); // Uncaught (in promise) 1
})
(4):promise.all()的方法 - all中的参数是一个数组,数组中放置的时promise对象,只有当数组中所有的都执行成resolve状态,才会执行all方法,注意,一定是所有,有一个是为失败,all方法不会执行,相当于运算符且 &&
function loadImage(src){
var pms = new Promise(function(resolve,reject){
var img = new Image()
// 给 img 添加 load事件 和 error事件,由promies 回调函数返回结果
img.onload = function(){
resolve(img);
}
img.onerror = function(){
// 当错误时,执行reject
reject(src);
}
// 给img 添加地址 - 在这里为同步代码
img.src = src;
})
// 返回这个 promies 对象
return pms;
}
var arr = [];
for(var i = 0;i < 5;i++){
var res = loadImage('./images/'+i+'.jpg');
arr.push(res);
}
// 当arr数组中所有的都完成了,才会执行all方法
Promise.all(arr).then(function(list){
list.forEach(itme=> {
// 在这里只有图片都完成,才会打印所有图片的宽度
console.log(itme.width);
});
})
图片格式:
(5): 连缀式写法,处理回调地狱
function loadImage(src){ var pms = new Promise(function(resolve,reject){
// 创建图片
var img = new Image()
// 给 img 添加 load事件 和 error事件,由promies 回调函数返回结果
img.onload = function(){
// 当正确时,执行resolve
resolve(img);
}
img.onerror = function(){
// 当错误时,执行reject
reject(src);
}
// 给img 添加地址 - 在这里为同步代码
img.src = src;
})
// 返回这个 promies 对象
return pms;
}
// promies 连缀式写法:结合loadImage函数
// then调用 return 返回下一次的结果
loadImage('./img/5-.jpg').then(function(img){
console.log(img.width,img.src)
return loadImage('./img/6-.jpg');
}).then(function(img){
console.log(img.width,img.src)
return loadImage('./img/7-.jpg');
}).then(function(img){
console.log(img.width,img.src)
return loadImage('./img/8-.jpg');
}).then(function(img){
console.log(img.width,img.src)
return loadImage('./img/9-.jpg');
}).then(function(img){
console.log(img.width,img.src);
})
如上,通过不断 return 返回promise对象,那么图片的加载就会按照我们自己的想法顺序加载。且比较美观,当图片较多,可以通过循环的方式来返回promise对象,就不需要一直连缀下去了。
JS promise对象的更多相关文章
- JS ~ Promise 对象
Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及该异步操作的结果值. Promise.all(iterable) 这个方法返回一个新的promise对象,该promise对象在i ...
- JS Promise对象学习
Promise对象的三个状态 pending(进行中) fulfilled(已成功) rejected(已失败) Promise代表一个异步操作,对象的状态一旦改变,就不会再改变 Promise构造函 ...
- 前端基本知识(四):JS的异步模式:1、回调函数;2、事件监听;3、观察者模式;4、promise对象
JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列 ...
- Promise对象及它在js中的执行顺序
关于Promise对象的学习及它的执行顺序 学习阮一峰老师的ES6入门后的记录 1.promise的定义 promise是一个对象,通常包裹着一个异步操作,promise对象提供一些接口的方法,返回一 ...
- node.js的Promise对象的使用
Promise对象是干嘛用的? 将异步操作以同步操作的流程表达出来 一.Promise对象的定义 let flag = true; const hello = new Promise(function ...
- ES6的promise对象应该这样用
ES6修补了一位Js修真者诸多的遗憾. 曾几何时,我这个小白从js非阻塞特性的坑中爬出来,当我经历了一些回调丑陋的写法和优化的尝试之后,我深深觉得js对于多线程阻塞式的开发语言而言,可能有着其太明显的 ...
- Angularjs promise对象解析
1.先来看一段Demo,看完这个demo你可以思考下如果使用$.ajax如何处理同样的逻辑,使用ng的promise有何优势? var ngApp=angular.module('ngApp',[]) ...
- js promise chain
新的标准里增加了原生的Promise. 这里只讨论链式使用的情况,思考一下其中的细节部分. 一,关于 then() 和 catch() 的复习 then() 和 catch() 的参数里可以放置 ca ...
- angularJS中的Promise对象($q)的深入理解
原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...
随机推荐
- 如何在微信小程序中使用阿里字体图标
第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 ---> 点击“添加入库” ...
- CentOS7.5搭建Kafka2.11-1.1.0集群与简单测试
一.下载 下载地址: http://kafka.apache.org/downloads.html 我这里下载的是Scala 2.11对应的 kafka_2.11-1.1.0.tgz 二.集群规 ...
- 【JMeter_02】JMeter目录结构与功能模块介绍
安装包目录结构 1.backups: 存放jmeter对脚本的自动备份保存文件 2.bin:jmeter的可执行文件目录,包含启动.配置等相关文件 3.dosc:程序自带的官方文档本地存放目录 4.e ...
- Mac App 破解之路八 病毒程序分析
本人使用MacBooster 7 扫出了几个未知程序. JMJ56 这个程序. 在finder中打开发现是一个shell脚本 调用了python 9NKb0 就是python脚本使用. 只不过是 ...
- CentOS快速安装Nginx的方法,nginx如何启动重启停止
1.防止 make: command not found,提前安装一些插件,取决于当前环境是否已安装,如果已经安装就不需要执行此命令 yum -y install gcc automake autoc ...
- 找到了两个联想的OEM XP镜像文件
今天在收拾移动硬盘的时候发现了两个XP镜像 还都是联想的,一个有OOBE,另一个无OOBE,全传网盘里了,需要的自取 有个疑问 2020年还有多少家庭电脑和ATM机器还在用XP??? link:htt ...
- docker安装,基本使用,实战
[docker概念作用术语] [使用docker的步骤] [docker安装及配置] [环境要求] docker要求centos7 必须要64位,内核3.1及以上 https://docs.docke ...
- 15.DRF-分页
Django rest framework(6)----分页 第一种分页 PageNumberPagination 基本使用 (1)urls.py urlpatterns = [ re_path('( ...
- 在ASP.NET 中有哪些数据验证控件(请解释ASP.NET中以什么方式进行数据验证)?
(1)RequiredFieldValidator:检查用户是否输入: (2)CompareValidator:检查两个表单输入项的输入信息是否存在某种指定关系,比如大.等于等: (3)RangeVa ...
- 深拷贝和浅拷贝以及void里的return用法
Object o1=new Object(); Object o2; int i1=3,i2; 浅拷贝 o2=o1;i2=i1; 深拷贝 o2=new Object();o2=o1.clone(); ...