【js基础--异步编程】Promise/A+规范（并实现一个按序加载图片包括加载失败的处理）

最新推荐文章于 2024-08-16 00:32:19 发布

嘘，别信他

最新推荐文章于 2024-08-16 00:32:19 发布

阅读量218

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/aalaad/article/details/125584878

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Promise/A+规范

是一个开放的标准，对于开发人员可互操作的 js promise。

promise表示一个异步操作的最终结果；
promise并不是通过移除回调来解决“回调地狱“问题；
Promise只是改变了你传递回调的地方。提供中立Promise机制，你就能重新获得程序的控制权。

状态：
    Promise有三种状态：pending(进行中)、fulfilled(已成功)和rejected（已失败），只有操作的结果才能决定状态，其他操作不能修改状态。

    一旦状态改变，就不会再变，任何时候都可以获取这个状态。Promise的状态改变只有两种可能：pending -> fulfilled 或者 pending -> rejected。



要求：then方法
    一个promise必须提供一个then方法，用来获取异步操作的value或error；

    then方法接受两个参数：promise.then(onfufilled,onrejected)，即成功时要执行的回调和失败时要执行的回调;

    then方法返回的是一个新的promise实例（不能是原来的promise），因此可以采用链式写法。then().then()..

下面实现一个按序加载图片包括加载失败的处理。

加载成功展示图片，加载失败图片位置展示加载失败。

<!DOCTYPE html>
<html>
  
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>promise 顺序加载图片</title>
</head>
<body>
<div id="pics">
	<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2095473240,3665022501&fm=26&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2427280154,4101530500&fm=26&gp=0.jpg" />
	<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2095473240,3665022501&fm=26&gp=0.jpg" data-src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1366818873,4080537748&fm=26&gp=0.jpg" />
	<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2095473240,3665022501&fm=26&gp=0.jpg" data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1309741115,836649703&fm=26&gp=0.jpg" />
	<!-- <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2095473240,3665022501&fm=26&gp=0.jpg" data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/%E7%9F%AD%E5%8F%91%E7%9F%AD%E5%8F%91" /> -->
	<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2095473240,3665022501&fm=26&gp=0.jpg" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181025%2F74d5d22a2dfe4460822c021cc72aa4ea.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658203132&t=fcf7cb886133603f74c08b55e4e617d5" />
</div>
</body>
  <script>
	let urls = [];
	var parDom = document.getElementById("pics"); 
	var doms = document.getElementsByTagName("img");
	for(let i=0;i< doms.length;i++){
		urls.push(doms[i].dataset.src)
	}
	function loadImage(url){
		return new Promise((resolve,reject) => {
			let img = new Image();
			img.onload = () => resolve(img);
			img.onerror = reject;
			img.src = url;
		})
	};
	var index = 0;
	function preLoadImage(){
		if(index == urls.length) return;
		loadImage(urls[index])
			.then((img) =>{
				parDom.children[index].replaceWith(img);
				if(index < urls.length){
					++index;
					preLoadImage()
				}
			})
			.catch((err) => {
				var textNode = document.createTextNode("图片加载失败");
				var ndiv=document.createElement('div');
				ndiv.appendChild(textNode)
				parDom.children[index].replaceWith(ndiv);
				if(parDom.children.length){
					++index;
					preLoadImage()
				}
			});
	}
	preLoadImage()
  </script>
</html>