对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 ...
随机推荐
- 分享一个图片上传插件(TP5.0)
效果预览图: 该插件主要功能是:可预览裁剪图片和保存原图片,执行裁剪图片后会删除 裁剪的原图片目录,以便减少空间.一.下载附件 地址:https://pan.baidu.com/s/1bpxZhM3 ...
- 基于Quartz实现简单的定时发送邮件
一.什么是Quartz Quartz 是一个轻量级任务调度框架,只需要做些简单的配置就可以使用:它可以支持持久化的任务存储,即使是任务中断或服务重启后,仍可以继续运行.Quartz既可以做为独立的应用 ...
- Count Color 线段树
Count Color Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit ...
- thinkphp传参
use think\Request; 写法1: $parms=Request::instance()->param(); $param=$params['键值']; 写法2: $request= ...
- Angular JS的正确打开姿势——简单实用(下)
前 言 絮叨絮叨 继上篇内容,本篇继续讲一下这款优秀并且实用的前端插件AngularJS. 六. AngularJS中的HTTP 6.1先看看JQuery的Ajax写法 $ajax({ me ...
- java通过shield链接Elasticsearch
本文mark了springboot中集成elasticsearch,并且实现连接带有shield权限管理的elasticsearch的方法. tips:首先建议java client版本和elasti ...
- DOM2练习
左右互相输入 <!DOCTYPE html><html> <head> <meta charset="UTF-8"&g ...
- Spring 源码剖析IOC容器(一)概览
目录 一.容器概述 二.核心类源码解读 三.模拟容器获取Bean ======================= 一.容器概述 spring IOC控制反转,又称为DI依赖注入:大体是先初始化bean ...
- WPF 只允许打开一个实例
我们有时候只希望我们的程序只打开一个实例,也就是我们的软件只有一次被打开. 那么我们可以通过一个办法知道,在这个软件打开前是不是打开过一个,还没关闭.也就是是否存在另一个程序在运行. 下面是一个简单方 ...
- javascript面向对象的写法及jQuery面向对象的写法
文章由来:jQuery源码学习时的总结 在JS中,一般的面向对象的写法如下: function Cao(){}//定义一个构造函数 Cao.prototype.init = function(){}/ ...