Promise

代码解析：

js 复制代码

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 部分

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`)

javascript 复制代码

// 获取按钮和图片元素
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);  // 设置请求方法和 URL
    xhr.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，显示图片。
- 如果请求失败，错误信息会打印在控制台。

完整示例说明：

页面结构 ：页面包含一个按钮和一个用于展示图片的 <img> 标签。
异步请求 ：点击按钮s会发起一个异步请求（通过 XMLHttpRequest），获取图片并动态更新页面中的图片。
Promise 用法 ：通过 Promise 来处理异步请求的成功与失败，保证代码的简洁和易维护。
图像展示 ：当图片加载完成后，图片 src 被更新，页面上的图片元素也会随之改变，显示新加载的图片。

总结：

HTML：负责页面的结构和用户交互。
JavaScript：负责发送 AJAX 请求，处理响应并更新页面。

这种方法使得你可以通过异步请求加载图片，而无需刷新页面，从而提供更好的用户体验。

代码解析：

HTML 部分与 JavaScript 部分

HTML 部分

HTML 部分的说明：

JavaScript 部分 (index.js)

JavaScript 部分的说明：

完整示例说明：

总结：

JavaScript 部分 (`index.js`)