ES6——异步操作之Promise

基本概念:

  Promise : 是 ES6 中新增的异步编程解决方案,提现在代码中他是一个对象 可以通过Promise构造函数来实例化。

  -new Promise(cb) ===> 实例的基本使用,Pending Resolved Rejected

> 两个原型方法:
  

-Promise.prototype.then()
-Promise.prototype.catch()

> 两个常用的 静态方法。
  

-Promise.all();
-Promise.resolve();
  conse imgs=[
    "http://i1.piimg.com/1949/4f411ed22ce88950.jpg",
    "http://i1.piimg.com/1949/5a35e8c2b246ba6f.jpg",
    "http://i1.piimg.com/1949/1afc870a86dfec5f.jpg"
  ];
//new Promise(cb);
//Pending(进行中)===>Resolved(已完成)
//Pending(进行中)===>Rejected(已失效)

const p = new Promise(function(resolve,reject){
  const img = new Image();
  img.onload=function(){
  resolve(this);
};
img.onerror=function(err){
  reject(new Error("图片加载失败"));
  };
})

console.log(123);
p.then(function(img){
  console.log("加载完成");
  document.body.appendChild(img);
}).catch(function(err){
  console.log(err);
});
console.log(456);

//////////////封装函数

function loadImg(url){
  const p = new Promise(function(resolve,reject){
    const img = new Image();
    img.onload=function(){
      resolve(this);
    };
    img.onerror=function(err){
      reject(new Error("图片加载失败"));
    };  
  });
  return p;
}
loadImg(imgs[0]).then(function(img){
  document.body.appendChild(img);
})

///////Promise.all() 可将多个 Promise实例包装成一个新的Promise实例。

  const allDone=Promise.all([loadImg(imgs[0]),loadImg(imgs[1]),loadImg(imgs[2]),loadImg(imgs[""])]);

  allDone.then(function(datas){
    datas.forEach(function(item,i){
      document.body.appendChild(item);
    });
    }).catch(function(err){
      console.log(err);
  })

///////Promise.resolve()

  

Promise.resolve(loadImg(imgs[0])).then(function(img){
  document.body.appendChild(img);
})

///////Promise.resolve()

  

Promise.resolve(loadImg(imgs[0])).then(function(img){
  document.body.appendChild(img);
})

以上。

原文地址:https://www.cnblogs.com/zyhbook/p/9425996.html

时间: 2024-11-08 07:11:08

ES6——异步操作之Promise的相关文章

es6中的promise对象

Promise是异步里面的一种解决方案,解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法,提供了`promise`对象, promise对象有三种状态:pending(进行中) .Resolved(已经完成)和Rejected(已失败) ES6规定,Promise对象是一个构造函数,用来生成Promise实例. var promise=new Promise(function(resove,reject){ if (/* 异步操作成功 */){ resolve(value); } el

ES6异步操作Promise

什么是Promise Promise是异步编程的一种解决方案,说白了就是一个构造函数,带有all,reject,resolve这几个方法,圆形上有then,catch等方法 Promise的特点 对象的状态不受外界影响,他的对象代表的是一个异步操作,只有三种状态,pending(进行中).fulfilled(已成功)和rejected(已失败)只有异步操作可以决定当前是哪一种状态,其他任何操作都无法改变这个状态,这也是Promise这个名字的由来,翻译成中文就是承诺的意思,表示一旦对象生成,其他

es6异步操作

异步编程对 JavaScript 语言太重要.JavaScript 只有一根线程,如果没有异步编程,根本没法用,非卡死不可. ES6 诞生以前,异步编程的方法,大概有下面四种. 回调函数 事件监听 发布/订阅 Promise 对象 ES6 将 JavaScript 异步编程带入了一个全新的阶段. 基本概念 异步 所谓"异步",简单说就是一个任务分成两段,先执行第一段,然后转而执行其他任务,等做好了准备,再回过头执行第二段. 比如,有一个任务是读取文件进行处理,任务的第一段是向操作系统发

ES6中的Promise

Promise作为ES6中最重要的特性之一,我们有必要掌握并理解透彻.本文将由浅到深,讲解Promise的基本概念与使用方法. 1.1ES6 Promise 先拉出来遛遛 复杂的概念先不讲,我们先简单粗暴地把Promise用一下,有个直观感受.那么第一个问题来了,Promise是什么玩意呢?是一个类?对象?数组?函数? 别猜了,直接打印出来看看吧,console.dir(Promise),就这么简单粗暴. 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resol

ES6学习笔记--promise对象

Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理和更强大.它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象. Promise对象有以下两个特点. (1)对象的状态不受外界影响.Promise对象代表一个异步操作,有三种状态:Pending(进行中).Resolved(已完成,又称 Fulfilled)和Rejected(已失败).只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态.这也是Promi

ES6 - Note5:Promise

1.Promise介绍 Promise最早是社区提出和实现,后面ES6将其写入标准,并原生提供Promise对象,是一种异步编程的解决方案,具体的概念大家可以去查看相关的资料.传统上处理异步都是以callback回调函数的方式完成,但是当回调嵌套的太多,便会使程序很难理解,如下所示 function a(cb){ console.log('a...'); cb('a'); } function b(cb){ console.log('b...'); cb('b'); } function c(c

深入理解ES6里的promise

一.ES6 Promise是什么? 复杂的概念先不讲,我们先简单粗暴地把Promise用一下,有个直观感受.那么第一个问题来了,Promise是什么呢?是一个类?对象?数组?函数? 别猜了,直接打印出来看看吧,console.dir(Promise),就这么简单粗暴. 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 这么说用Promise new出来的对象肯定就有then.catch

[转]JS - Promise使用详解2(ES6中的Promise)

原文地址:https://www.hangge.com/blog/cache/detail_1638.html 2015年6月, ES2015(即 ECMAScript 6.ES6) 正式发布.其中 Promise 被列为正式规范,成为 ES6 中最重要的特性之一. 1,then()方法 简单来讲,then 方法就是把原来的回调写法分离出来,在异步操作执行完后,用链式调用的方式执行回调函数. 而 Promise 的优势就在于这个链式调用.我们可以在 then 方法中继续写 Promise 对象并

自己实现ES6中的Promise API

Promise API是ES6的推荐标准,该API是由各JavaScript的执行引擎在底层,通常是使用C++语言实现的 为了更好地理解Promise API的使用方法并探究其可能的实现方式,笔者在JavaScript层面对Promise API进行了实现. 该实现只是作为实验.学习使用,虽然与内置的实现功能相同,但是在设计和运行效率上肯定是不能相提并论. 我也希望之后能对自己的实现进行改善. 该实现在处理异步任务时,采用了轮询的方式来检测其状态的变化. 具体代码如下(注:笔者采用Node方式进