Promiseの使用
Promiseとは何か、どのアプリケーションシーンか
承諾は、非同期プログラミングの解決策である.Promiseとは、それ自体が容器であり、非同期操作の結果が保存されており、3つの状態があります. pending(進行中) resolved(成功) rejected(失敗 Promise.all()/実装すべてのピクチャがロードされたときに、ページに表示される Promise.race()/実装先ロード完了者 容器結果:を取得する.then()/約束を果たすコールバック|.catch()/承諾を拒否したコールバック
承諾は、非同期プログラミングの解決策である.Promiseとは、それ自体が容器であり、非同期操作の結果が保存されており、3つの状態があります.
<p><button id="btn"> </button></p>
<div id="box1">
</div>
<div id="box2">
<p>race </p>
</div>
<div id="box3">
<p> ， </p>
</div>
<script>
var pics = [
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7bc54a61b927dd8c54ddd39a0acf0254.jpg?w=632&h=340",
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/94c74e01afe50a86c3a87ff030b85781.jpg?w=632&h=340",
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
]
function loadImg(url){
return new Promise((resolve,reject)=>{
var img = document.createElement("img");
img.src = url;
img.style.width = "200px";
img.onload = function(){resolve(img)};
img.onerror = function(){reject(img)};
})
}
//
btn.onclick = function(){
loadImg(pics[0])
.then(res=>{
box1.appendChild(res);
return loadImg(pics[1]);
})
.then(res=>{
box1.appendChild(res);
return loadImg(pics[2]);
})
.then(res=>{
box1.appendChild(res);
})
}
//race
Promise.race([loadImg(pics[0]),loadImg(pics[1]),loadImg(pics[2])])
.then(res=>{
box2.appendChild(res);
})
//all
Promise.all([loadImg(pics[0]),loadImg(pics[1]),loadImg(pics[2])])
.then(res=>{
for(img in res){
box3.appendChild(res[img]);
}
})
</script>
</code></pre>
</div>
</div>
</div>
</div>