ES6——异步操作之Promise

Posted 2020-12-28 zyhbook

基本概念：

　　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);
})

 

 

 

以上。