对es6中Promise和async的理解
Promise
var promise = new Promise((resolve,reject)=>{
resolve(value);
//reject(value)
});
//promise的状态由内部是否执行resolve(),reject(),或者报错决定
promise.then(value=>{
return value //等价于return Promise.resolve(value) 此时状态由pendding变为resolved
//return new Promise((resolve,reject)=>{}) 如果此时内部未执行resolve(),reject(),或者报错,promise.then返回的对象就是pendding状态
})
//这个方法返回一个promise对象,这个对象和promise不相等,这个promise的状态,由return决定
//如果return的是一个值,或者没有return(返回的是undefined),此时状态由pendding变为resolved
var promise = new Promise((resolve,reject)=>{
console.log(1);
resolve();
});
promise.then(()=>{
return Promise.all[new Promise(
(resolve,reject)=>{
console.log(2)
resolve();
}
),new Promise(
(resolve,reject)=>{
console.log(3)
resolve();
}
)]
}).then(()=>{
console.log(4)
})
promise.then(()=>console.log('end'))
// 1 2 3 end 4 1 2 3 end返回的promise都是基于 promise的,4基于的是promise.then(),事件队列的排列顺序是1,2,3,end,4
async function logInOrder(urls) {
// 并发读取远程URL
const textPromises = urls.map(url => {
return function(){
return new Promise((reslove)=>{
setTimeout(()=>reslove(url),1000);
});
};
});
let reslt=[];
// 按次序输出
for (const textPromise of textPromises) {
reslt.push(await textPromise());//此时才执行new Promise,执行定时器,await没有返回结果是不会执行后面的console.log的
console.log(reslt);
}
}
async
async function logInOrder(urls) {
// 并发读取远程URL
const textPromises = urls.map(url => {
return new Promise((reslove)=>{
setTimeout(()=>reslove(url),1000);
});
});
let reslt=[];
// 按次序输出
for (const textPromise of textPromises) {
reslt.push(await textPromise);//在map(非常快)的时候定时器已经开启,await只是等待resolve的执行,恰好遍历的定时器时间一样,并行打印
console.log(reslt);
}
}
var promise = new Promise((resolve,reject)=>{
resolve(url1);
});
if(false){ //或者true,可以用promise赋值的方式将新的promise的结果传给下面的then
promise = promise.then(value=>{
return new Promise((resolve)=>{
resolve(url2)
})
})
}
promise.then((value)=>{
})
扩展我自己写的一个Promise.props方法
// 直接在构造方法上定义静态方法
Promise.props = function(obj) {
if (typeof obj !== 'object') return new Promise((resolve)=>resolve(obj));
let keys = Object.keys(obj);
return Promise.all(keys.map(item=>obj[item])).then((value) => {
let foo={};
value.forEach((v,i)=>foo[keys[i]] = v);
return foo
});
}
Promise.props({
a: new Promise((resolve) => {
setTimeout(() => resolve(123), 1000)
}),
b: new Promise((resolve) => {
setTimeout(() => resolve(456), 1000)
})
}).then(value => console.log(value.a, value.b))
对es6中Promise和async的理解的更多相关文章
- ES6中Promise对象个人理解
Promise是ES6原生提供的一个用来传递异步消息的对象.它减少了传统ajax金字塔回调,可以将异步操作以同步操作的流程表达出来使得代码维护和可读性方面好很多. Promise的状态: 既然是用来传 ...
- 对于ES6中Promise的个人见解
1.js中常见的异步 JavaScript可以响应用户的一些异步交互,比如单击鼠标和按键盘等操作. let button = document.getElementById("btn&quo ...
- 关于ES6的Promise的使用深入理解
ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...
- ES6中promise的使用方法
先看看ES5中异步编程的使用. let ajax = function (callBlack) { setTimeout(function () { callBlack && call ...
- ES6中promise总结
一.什么是ES6的Promise 讲太多也没有.直接在打印出来就好,console.dir(Promise) Promise 是一个构造函数,自身有all, reject, resolve 这几个眼熟 ...
- ES6中的class类的理解
传统的javascript中只有对象,没有类的概念.它是基于原型的面向对象语言.原型对象特点就是将自身的属性共享给新对象.这样的写法相对于其它传统面向对象语言来讲,很有一种独树一帜的感脚!非常容易让人 ...
- 阿里前端测试题--关于ES6中Promise函数的理解与应用
今天做了阿里前端的笔试题目,原题目是这样的 //实现mergePromise函数,把传进去的数组顺序先后执行,//并且把返回的数据先后放到数组data中 const timeout = ms => ...
- ES6 中 Promise
在说Promise之前我们先简单说一下什么是同步异步? 同步(Sync):所谓同步,就是发出一个功能调用时,在没有得到结果之前,该调用就不返回或继续执行后续操作. 异步(Async):异步与同步相对, ...
- ES6中Promise的入门(结合例子)
一.Promise的前言 解决回调地狱 //以往回调方式 函数1(function(){ //代码执行...(ajax1) 函数2(function(){ //代码执行...(ajax2) 函数3(f ...
随机推荐
- LPCTSTR LPCWSTR LPCSTR 含义
#ifdef UNICODE#define LPCTSTR LPCWSTR#else#define LPCTSTR LPCSTR#endif LPCTSTR A 32-bit pointer ...
- myeclipse的快捷键
------------------------------------MyEclipse 快捷键1(CTRL)-------------------------------------Ctrl+1 ...
- js循环生成多个easyui datagrid数据网格时,初始化表格
$.each( content, function(i, item){ var info_tpl = "";var result_tpl = "";var pr ...
- RobotFramework自动化测试框架-移动手机自动化测试Click A Point关键字的使用
Click A Point关键字用来模拟点击APP界面上的一个点,该关键字接收两个三个参数[ x=0 | y=0 | duration=100 ],x和y代表的是点的坐标位置,duration代表的是 ...
- Spring读书笔记——bean加载
我们的日常开发几乎离不开Spring,他为我们的开发带来了很大的便捷,那么Spring框架是如何做到方便他人的呢.今天就来说说bean如何被加载加载. 我们在xml文件中写过太多类似这样的bean声明 ...
- Telerik 控件 RadGridview实现绑定
0.使用MiroModes框架请先阅读http://blogs.telerik.com/blogs/posts/10-01-20/micromodels_for_silverlight.aspx 1. ...
- vue-cli如何引入bootstrap工具
以下操作以正常安装node环境为前提. 1.引入jq: 在npm控制台中,进入项目目录,然后输入指令npm install jquery --save-dev(npm换成cnpm更好,国内环境下使用c ...
- win10 sdk 是否向下兼容
向下兼容(downward compatibility),又称向后兼容(backward compatibility).回溯兼容,在计算机中指在一个程序.库或硬件更新到较新版本后,用旧版本程序创建的文 ...
- win10 uwp 如何拖动一个TextBlock的文字到另一个TextBlock
我在堆栈网看到有人问 如何拖动一个TextBlock的文字到另一个TextBlock 于是看到一个大神给出的方法,下面我就来和大家说下如何拖动 一开始我们需要一个界面,就放两个TextBlock 一个 ...
- Ubuntu配置OpenStack 一:主机环境配置以及问题总结
本文包含openstack配置的实验环境的基本步骤.在下面的步骤中将逐步讲解如何操作. 1.准备三台虚拟机 主机名字分别命名为controller.network.computer[desktop版或 ...