Promise使用
Promise可以进行异步操作,比起回调函数,更加容易维护。
首先创建一个简单的Promise
var p = new Promise( () => {}); console.log(p); //会打印一个promise对象,状态是pending,状态值是undefined
如果Promise构造函数里没有参数将会报错
promise有三个状态,分别是pending,resolved和rejected。
var p = new Promise((res,rej) => { //里面有俩个参数,是俩个函数,一个表示成功的,一个表示失败的
res(200);
}) console.log(p); //打印promise对象,状态是成功,状态值是200
promise任务链
var p = new Promise((res,rej) => { res() }); //promise链式,可以一直then,如果有一次状态为失败,就会执行catch
p.then(() => {
console.log(1);
}).then(() => { //then本身是返回一个promise,也可以自己return一个新的promise实例
return new Promise((res,rej) => {
rej(100);
})
}).then(() => {
console.log(3)
}).catch((data) => {
console.log(data);
)};
打印的是1和100,p拥有一个then方法,并且他还会返回一个promise,可以进行链式操作,如果中途有个rejected状态,就会执行catch,并且后面的不在执行
执行顺序
console.log(1); setTimeout(() => {
console.log(2);
}) setTimeout(()=> {
console.log(3);
}) var p = new Promise((res,rej) => {
console.log(4);
res();
})
p.then(()=>{
console.log(5)
}) console.log(6);
打印的顺序是1,4,6,5,2,3
js从上到下执行,第一个打印1,后面有俩个定时器,还有直接打印的和promise,定时器有延迟执行,会放到队列里,promise创建的时候回里面执行参数里面的代码,就会打印4
然后打印6,之后会打印5,最后会打印队列里的俩个定时器2,3
promise的静态方法
var p1 = new Promise((res,rej) => {
setTimeout(() => {
res('1');
},1000)
}) var p2 = new Promise((res,rej) => {
setTimeout(() => {
res('2');
},2000)
}) var p3 = new Promise((res,rej) => {
setTimeout(() => {
res('3')
},500)
}) var p4 = Promise.all([p1,p2,p3]); p4.then((data) => {
console.log(data); //['1','2','3']
}) console.log(p4); //打印一个promise对象
Promise.all()他可以让参数里面的所有promise最后同时进行
并且还有rece方法,他会执行里面最快的一个promise
Promise使用的更多相关文章
- Javascript - Promise学习笔记
最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下. 一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编 ...
- 路由的Resolve机制(需要了解promise)
angular的resovle机制,实际上是应用了promise,在进入特定的路由之前给我们一个做预处理的机会 1.在进入这个路由之前先懒加载对应的 .js $stateProvider .state ...
- angular2系列教程(七)Injectable、Promise、Interface、使用服务
今天我们要讲的ng2的service这个概念,和ng1一样,service通常用于发送http请求,但其实你可以在里面封装任何你想封装的方法,有时候控制器之间的通讯也是依靠service来完成的,让我 ...
- 闲话Promise机制
Promise的诞生与Javascript中异步编程息息相关,js中异步编程主要指的是setTimout/setInterval.DOM事件机制.ajax,通过传入回调函数实现控制反转.异步编程为js ...
- 深入理解jQuery、Angular、node中的Promise
最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...
- Promise的前世今生和妙用技巧
浏览器事件模型和回调机制 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的.同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一 ...
- JavaScript进阶之路——认识和使用Promise,重构你的Js代码
一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半 ...
- 细说Promise
一.前言 JavaScript是单线程的,固,一次只能执行一个任务,当有一个任务耗时很长时,后面的任务就必须等待.那么,有什么办法,可以解决这类问题呢?(抛开WebWorker不谈),那就是让代码异步 ...
- 浅谈Angular的 $q, defer, promise
浅谈Angular的 $q, defer, promise 时间 2016-01-13 00:28:00 博客园-原创精华区 原文 http://www.cnblogs.com/big-snow/ ...
- angular学习笔记(二十八-附2)-$http,$resource中的promise对象
下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...
随机推荐
- servlet转发重定向
1.request.getRequestDispacther("/test.jsp").forword(request,response); 转发 浏览器URL是一个地 ...
- FakeGame 集成总结
1.64位支持(目前编译不过); 2.Dx9? 2.以何种方式提供(源码?工程版本(VS2005还是其他)): 3.是否可以连接TC的服务器进行调试? TDR编解码失败: 不同目录下存在a.lib的不 ...
- 内置委托func
1.p=>p.CTName,其中p是此委托入参,p.CTName是返回值 2. 3.调用委托的方法
- 【UML】NO.54.EBook.6.UML.2.002-【Thinking In UML 大象 第二版】- UML 核心元素
1.0.0 Summary Tittle:[UML]NO.54.EBook.6.UML.2.002-[Thinking In UML 大象 第二版]- UML 核心元素 Style:DesignPat ...
- 这10个Python项目超有趣!
前言: Python可谓是现在很多人正在学或者想学的一个脚本语言了,提到学习自然就少不了拿项目练手,可是一般的项目根本提不起兴趣嘛,这10个项目可是非常有趣的,不信你看看. [Python 图片转字符 ...
- 十一、无事勿扰,有事通知(2)——KVO
概述 Key-Value-Observe,简称KVO,和上节介绍的Notification师出同门,主要目的都是为了实现观察者模式. 虽说是同门师兄弟,但是各自精通的技艺却是各不相同的. 不像Noti ...
- 取数游戏II
传送门 #include <bits/stdc++.h> using namespace std; #define ll long long #define re register #de ...
- python数据结构-如何为元组中的每个元素命名
如何为元组中的每个元素命名 简述 当对象数据格式固定时,用元组比列表更节省内存空间, 我们使用索引访问元组元素,但是这种访问方式会降低程序的可读性. 举个栗子 对于学生的信息,我们有固定的数据格式,我 ...
- laravel自定义验证
1.在控制器中直接写验证$this->validate($request, [ 'video_ids' => [ function($attribute, $value, $fail) { ...
- AWS是怎么改写 MySQL的?
五倍吞吐量的提升,跨可用区的六副本,低于一分钟的宕机恢复,兼容 MySQL协议,这是 AWS 推出 Aurora 数据库时给出的数据. 这种量级的提升不可能是小修小补,大都是在架构上有了变革性的突破才 ...