当前位置：首页 > ops >正文

Promise

ops 2025/8/11 18:41:09

代码解析：

javascript复制编辑
const imgAddress = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606645702812&di=2fcf59d8';const imgPromise = (url) => {return new Promise((resolve, reject) => {const img = new Image();  // 创建新的图片对象img.src = url;  // 设置图片源img.onload = () => {  // 图片加载成功resolve(img);  // 调用 resolve 返回图片对象};img.onerror = () => {  // 图片加载失败reject(new Error('图片有误'));  // 调用 reject 返回错误};});
};// 调用 imgPromise 并传入图片地址
imgPromise(imgAddress).then(img => {document.body.appendChild(img);  // 图片加载成功，插入图片到页面中}).catch(err => {document.body.innerHTML = err;  // 图片加载失败，输出错误信息});

HTML 部分与 JavaScript 部分

从你提供的图片来看，HTML 部分和 JavaScript 部分分别负责页面结构和事件处理。下面我将分开讲解 HTML 和 JavaScript 的部分，并提供完整示例代码。

HTML 部分

<!DOCTYPE html>
<html lang="ens"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX 图片加载示例</title>
</head><body><!-- 按钮，点击后触发 AJAX 请求 --><a href="#" id="fetch-button">点击获取蛋黄师傅课程</a><!-- 显示图片的区域 --><img id="image-display" src="" alt="点击获取图片" style="margin-top: 20px; width: 300px; height: 200px;"><script src="index.js"></script>  <!-- 引入 JavaScript 文件 -->
</body></html>

HTML 部分的说明：

<a> 标签：用于触发图片的加载操作。用户点击后会发起 AJAX 请求。
<img> 标签：用于显示加载的图片。初始 src 为空，待加载完图片后，JavaScript 会动态更新该 src。
<script src="index.js">：引入外部 JavaScript 文件 index.js，这个文件会处理 AJAX 请求和图片更新。

JavaScript 部分 (`index.js`)

// 获取按钮和图片元素
const button = document.querySelector('#fetch-button');
const image = document.querySelector('#image-display');// 定义异步函数，封装 AJAX 请求
function ajaxPromise() {let promise = new Promise((resolve, reject) => {let xhr = new XMLHttpRequest();  // 创建 XMLHttpRequest 对象xhr.open('GET', 'egg.gif', true);  // 设置请求方法和 URLxhr.onreadystatechange = () => {if (xhr.readyState === 4) {  // 请求完成if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {resolve(xhr.responseURL);  // 请求成功，返回图片 URL} else {reject(new Error(xhr.statusText));  // 请求失败，返回错误信息}}};xhr.send(null);  // 发送请求});return promise;
}// 监听按钮点击事件
button.addEventListener('click', () => {ajaxPromise().then(responseURL => {  // 请求成功后，更新图片的源image.src = responseURL;}).catch(statusText => {  // 请求失败后，打印错误信息console.log(statusText);});
});

JavaScript 部分的说明：

获取 DOM 元素：
- button 用来存储按钮元素，通过 document.querySelector 获取。
- image 用来存储图片元素，获取后可以动态更新图片的 src。
ajaxPromise 函数：
- 这是一个使用 Promise 封装的异步函数，发送一个 GET 请求来加载 egg.gif 图片。
- 如果请求成功并且状态码为 200 或 304，就会调用 resolve() 返回图片的 URL (xhr.responseURL)。
- 如果请求失败，调用 reject() 返回错误信息。
事件监听器：
- 为 button 添加点击事件监听器，当点击按钮时触发 ajaxPromise()。
- 如果 ajaxPromise() 成功，回调函数会将返回的图片 URL 设置为图片元素的 src，显示图片。
- 如果请求失败，错误信息会打印在控制台。