ES6中的异步对象Promise

回忆一下ES5中的怎么使用异步方法


// es5中的异步回调let ajax = function(callback){console.log('执行')    // 执行setTimeout(() => {callback&&callback.call();}, 1000)};ajax(function(){console.log('hello') // 1s后打印hello});

使用ES6的Promise的方法：


let ajax = function(){console.log('执行2'); // 执行2return new Promise((resolve,reject)=>{setTimeout(() => {resolve()  // 执行下一步操作， reject   // 中断当前的操作},5000)})}ajax().then(()=>{console.log('promise','timeout2')   // 5s后打印   promise timeout2})

连续使用Promise对象：


let ajax = function(){console.log('执行3');return new Promise((resolve,reject)=>{setTimeout(() => {resolve();},5000)})}ajax().then(function(){return new Promise(function(resolve,reject){setTimeout(() => {resolve()}, 2000)})}).then(function(){console.log('timeouk3')  // 7s后打印timeouk3})

Promise捕获错误的catch( )

// catch 捕获错误let ajax = function(num){console.log('执行4');return new Promise(function(resolve,reject){if(num>=5){resolve();}else{throw new Error('传入的数字比5小')}})}ajax(4).then(function(){console.log('log',4);  }).catch(function(err){console.log('catch',err);  // catch Error: 传入的数字比5小})

Promise的两种高级用法

1.Promise.all( )


function loadImg(src){return new Promise((resolve,reject)=>{let img = document.createElement('img');img.src = src;img.onload = function(){resolve(img);}img.onerror = function(err){reject(err);  }})}// 对所有的图片进行遍历function showImgs(imgs){  console.log(imgs);imgs.forEach(function(img){document.body.appendChild(img);})}// promise.all()的用法Promise.all([loadImg('http://yanshi.sucaihuo.com/modals/0/23/small.jpg'),loadImg('http://yanshi.sucaihuo.com/modals/0/20/small.jpg'),loadImg('http://yanshi.sucaihuo.com/modals/0/2/small.jpg')]).then(showImgs)/**解析: 把多个promise实例当做一个promise实例，当所有的promise实例发生变化后新的promise实例才会发生变化*/

2.Promise.race( )


// Promise 先加载 有一个图片加载完就先添加到页面function loadImg(src){return new Promise((resolve,reject)=>{let img = document.createElement('img');img.src = src;img.onload = function(){resolve(img);}img.onerror = function(err){reject(err);  }})}function showImgs(img){let p = document.createElement('p');p.appendChild(img);document.body.appendChild(p);}// promise.race()的用法 只要有一个网速好的加载完，其他的就不加载了Promise.race([loadImg('http://yanshi.sucaihuo.com/modals/0/23/small.jpg'),loadImg('http://yanshi.sucaihuo.com/modals/0/20/small.jpg'),loadImg('http://yanshi.sucaihuo.com/modals/0/2/small.jpg')]).then(showImgs)}

ES6中的异步对象Promise相关推荐

js基础知识：es6中，当对象中的key名称为一个变量时，需要用`[]`括起来
es6中,当对象中的key名称为一个变量时,需要用[]括起来
javascript中内置对象promise知多少
const p1 = new Promise(()=>{}); const p2 = p1.then(function f_ok(){}, function f_err(){}); // p2也 ...
ES6中Map与对象、数组，JSON之间的相互转换
Map转为数组 const map = new Map(); map.set(1,"foo").set(2,"bar").set(3,"baz&quo ...
ES6中的Promise使用方法与总结
在javascript中,代码是单线程执行的,对于一些比较耗时的IO操作,都是通过异步回调函数来实现的. 但是这样会存在一个问题,当下一个的操作需要上一个操作的结果时,我们只能把代码嵌到上一个操作的回 ...
深入浅出JS—15 ES6中Proxy及Reflect的使用
在一些前端框架中,常常需要监听数据变化,页面进行响应.为了监听对象的变化,需要对对象的操作进行捕获.本文着重介绍ES6中Proxy代理对象的使用,以及涉及到的映射对象Reflect使用 1. Prox ...
【JavaScript 教程】ES6 中的 Promise对象详解
[JavaScript 教程]ES6 中的 Promise对象详解 1.Promise对象含义 promise是异步编程的一种解决方法. 所谓promise,简单说是一个容器,里面保存着某个未来才会 ...
支付宝异步回调返回success_深入解决异步编程Promise对象的学习
1.什么是Promise 简单来说Promise是异步编程的一种解决方案 Promise是ES6中的特性. 什么是异步操作? 网络请求中,对端服务器处理需要时间,信息传递过程需要时间,不像我们本地调用 ...
前端综合学习笔记---异步、ES6/7、Module、Promise同步 vs 异步
个人bolg地址同步 vs 异步先看下面的 demo,根据程序阅读起来表达的意思,应该是先打印100,1秒钟之后打印200,最后打印300.但是实际运行根本不是那么回事 console.log(1 ...
Promise使用详解2（ES6中的Promise）
2015年6月, ES2015 (即 ECMAScript 6 . ES6 ) 正式发布.其中 Promise 被列为正式规范,成为 ES6 中最重要的特性之一. 1,then()方法简 ...

ES6中的异步对象Promise

ES6中的异步对象Promise相关推荐

最新文章

热门文章