标签：child 解决 异步 col his 图片加载 nload bsp strong
基本概念：
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); })
以上。
标签：child 解决 异步 col his 图片加载 nload bsp strong
原文地址：https://www.cnblogs.com/zyhbook/p/9425996.html
