有详解: 20个Promise各种案例, 学完闭环

在JavaScript中，Promise 对象是异步编程的一种解决方案

20个不同场景的 Promise 使用案例，涉及异步调用、同步请求以及同步代码中包含异步请求的情况

1. 读取文件 - 异步读取本地文件内容。

// 引入Node.js的文件系统模块，并且只引入其Promise版本的API。
// 这样我们可以使用Promise而不是回调函数来处理异步操作。
const fs = require('fs').promises;

// 使用fs模块的readFile方法来异步地读取文件。
// 'example.txt'是我们想要读取的文件的路径。
// 'utf8'是一个选项，指定文件的字符编码，这样我们可以得到一个字符串而不是原始的二进制数据。
fs.readFile('example.txt', 'utf8')
  .then(content => {
    // 如果文件读取成功，readFile方法返回的Promise会被解决（fulfilled），
    // 并且会带有文件内容作为参数传递给.then方法中的回调函数。
    console.log(content); // 这里我们将文件内容打印到控制台。
  })
  // 如果在读取文件过程中出现错误（例如文件不存在），
  // readFile方法返回的Promise会被拒绝（rejected），
  // 并且错误对象会被传递给.catch方法中的回调函数。
  .catch(error => {
    // 这里我们可以处理错误，比如打印错误消息到控制台。
    console.error('Error reading file:', error);
  });

2. 网络请求 - 使用fetch进行异步网络请求。

// 使用全局fetch函数发起网络请求。fetch返回一个Promise，它会在请求完成时解决。
fetch('https://api.example.com/data')
  .then(response => {
    // 当请求成功完成时，这个.then()的回调函数会被调用。
    // response是一个Response对象，包含了请求的响应信息。

    // 使用Response对象的.json()方法来解析响应体中的JSON格式文本。
    // .json()本身也返回一个Promise，它将在文本被成功解析为JavaScript对象后解决。
    return response.json();
  })
  .then(data => {
    // 这个.then()的回调函数会在上一个.then()中返回的Promise被解决后调用。
    // 此时的data参数是解析后的JavaScript对象，即API返回的数据。

    // 在控制台打印出解析后的数据。
    console.log(data);
  })
  // 如果在任何一个Promise链中捕获到错误（例如网络问题或JSON解析错误），
  // .catch()的回调函数将被调用，并接收到相关的错误信息。
  .catch(error => {
    // 这里我们可以处理错误，例如打印出错误详情。
    console.error('Error fetching data:', error);
  });

3. 数据库查询 - 异步执行数据库查询并处理结果。

// 假设db是一个数据库实例对象，它具有一个query方法用于执行数据库查询。
// query方法接受一个SQL查询字符串作为参数，并返回一个Promise对象。
// 这个Promise在数据库查询完成时解决（fulfilled）。
db.query('SELECT * FROM users')
  .then(results => {
    // 这个.then()的回调函数会在query方法返回的Promise解决时被调用。
    // 'results'参数包含了查询的结果。

    // 这里我们将查询结果打印到控制台。
    // 在实际应用中，你可能需要对这些结果进行进一步的处理。
    console.log(results);
  })
  // 如果查询过程中出现了错误（例如查询语法错误或数据库连接问题），
  // query方法返回的Promise会被拒绝（rejected），
  // 并且错误对象会被传递给下面的.catch方法中的回调函数。
  .catch(error => {
    // 这里我们可以处理查询错误，比如打印错误消息到控制台。
    console.error('Error during database query:', error);
  });

4. 用户输入验证 - 异步验证用户输入。

// 定义一个函数validateInput，它接收一个参数input，用于验证输入。
function validateInput(input) {
  // 函数返回一个新的Promise对象。
  return new Promise((resolve, reject) => {
    // Promise构造函数接收一个执行器函数，该函数有两个参数：resolve和reject。
    // 当输入有效时，调用resolve函数。
    if (isValid(input)) {
      // 如果输入验证通过，调用resolve，并传递一个字符串'Valid input'。
      resolve('Valid input');
    } else {
      // 如果输入验证不通过，调用reject，并传递一个字符串'Invalid input'。
      reject('Invalid input');
    }
  });
}

// 使用validateInput函数并传入userInput，这里假设userInput是之前定义好的变量。
validateInput(userInput)
  .then(result => {
    // .then()方法定义了一个回调函数，它会在Promise被resolve时执行。
    // result参数是resolve函数调用时传递的值，即'Valid input'。
    // 这里可以添加处理验证通过结果的代码。
  })
  .catch(error => {
    // .catch()方法定义了一个回调函数，它会在Promise被reject时执行。
    // error参数是reject函数调用时传递的值，即'Invalid input'。
    // 这里可以添加处理验证失败的错误的代码。
  });

5. 图片加载 - 等待图片异步加载完成。

// 定义一个名为loadImage的函数，它接受一个图片的URL作为参数。
function loadImage(url) {
  // 返回一个新的Promise对象。
  return new Promise((resolve, reject) => {
    // 创建一个新的Image对象。
    const image = new Image();
    // 当图片加载完成时，onload事件处理程序会被调用。
    image.onload = () => {
      // 调用resolve函数，并将加载完成的Image对象作为参数传递，表示Promise成功完成。
      resolve(image);
    };
    // 如果图片加载出现错误，onerror事件处理程序会被调用。
    image.onerror = () => {
      // 调用reject函数，并创建一个新的Error对象，表示Promise失败。
      // Error对象包含了一个错误信息，说明图片无法在给定的URL加载。
      reject(new Error(`Could not load image at ${url}`));
    };
    // 设置Image对象的src属性为提供的URL，这将开始图片的加载过程。
    image.src = url;
  });
}

// 使用loadImage函数，并传入图片的URL。
loadImage('image.png')
  // 如果Promise被解决（即图片成功加载），then方法中的回调函数会被调用。
  .then(image => {
    // image是加载完成的Image对象。
    // 在这里可以添加处理成功加载的图片的代码。
  })
  // 如果Promise被拒绝（即图片加载失败），catch方法中的回调函数会被调用。
  .catch(error => {
    // error是一个包含错误信息的Error对象。
    // 在这里可以添加处理加载错误的代码。
  });

6. 超时功能 - 设置一个异步超时。

// 定义一个名为timeout的函数，它接受一个毫秒数作为参数。
function timeout(ms) {
  // 返回一个新的Promise对象。
  return new Promise(resolve => {
    // 调用setTimeout函数，它接受一个回调函数和延时的毫秒数。
    setTimeout(
      // setTimeout结束后会调用这个resolve回调函数，
      // 它会使Promise对象的状态变为已解决（fulfilled）
      resolve, 
      ms       // 延时的时间，单位是毫秒。
    );
  });
}

// 使用timeout函数并传入2000毫秒作为参数。
timeout(2000)
  // 当Promise对象的状态变为已解决（即setTimeout完成后），then方法中的回调函数会被调用。
  .then(() => {
    // 打印一条消息到控制台，表示已经过了指定的2秒钟延时。
    console.log('Timeout after 2 seconds');
  });
  // 注意这里没有添加.catch方法来处理错误，因为setTimeout不会失败，
  // 所以Promise只会被解决，不会被拒绝。

7. 文件写入 - 异步写入文件

// 导入fs模块（这一行在代码中是隐含的，没有显示出来）
const fs = require('fs').promises; // 假设fs模块已经是Promise风格的

// 使用fs.writeFile函数来异步地将文本写入文件。
// 'example.txt' 是要写入的文件名。
// 'Hello, World!' 是要写入的文本内容。
fs.writeFile('example.txt', 'Hello, World!')
  // writeFile返回一个Promise，当文件写入操作完成时，这个Promise会被解决。
  .then(() => {
    // 这里的回调函数会在Promise被解决时调用，即文件写入成功时。
    console.log('File written'); // 打印一条消息到控制台，表示文件已经成功写入。
  })
  // 如果在这里添加.catch方法，它会处理写入文件时可能发生的错误。
  .catch((error) => {
    // 这里的回调函数会在Promise被拒绝时调用，即文件写入失败时。
    console.error('Failed to write file', error); // 打印错误消息到控制台。
  });

8. 数据加工处理 - 异步处理数据并返回处理后的结果。

// 定义一个名为 processData 的函数，它接受一个参数 data，这个参数代表需要处理的原始数据。
function processData(data) {
  // 返回一个新的 Promise 对象。
  return new Promise(resolve => {
    // 调用 heavyDataProcessing 函数来处理数据。这个函数名暗示了数据处理可能很耗时。
    const processed = heavyDataProcessing(data);
    
    // 当 heavyDataProcessing 函数完成数据处理后，调用 resolve 函数
    // 并将处理后的数据作为参数传递，这将会将 Promise 的状态标记为已解决（fulfilled）。
    resolve(processed);
  });
}

// 调用 processData 函数并传入 rawData 作为参数，rawData 是需要处理的原始数据。
processData(rawData)
  // 当 processData 函数返回的 Promise 被解决时，即数据处理完成时，
  // then 方法中的回调函数会被调用。
  .then(processedData => {
    // 在这个回调函数内，可以使用处理后的数据 processedData。
    // 此处的 ... 应该被替换为实际的代码，来处理或使用处理后的数据。
  });
  // 如果 processData 函数或 heavyDataProcessing 函数中有可能抛出错误，
  // 应该在这里添加 .catch 方法来捕获并处理这些错误。

9. 事件监听 - 等待一个事件发生。

// 定义一个名为 waitForEvent 的函数，它接受两个参数：
// emitter - 一个事件发射器对象（EventEmitter），
// 可以是任何一个实现了事件监听模式的对象。
// event - 一个字符串，表示我们想要监听的事件名称。
function waitForEvent(emitter, event) {
  // 返回一个新的 Promise 对象。
  return new Promise(resolve => {
    // 使用 emitter 的 once 方法来监听一个事件一次。
    // 当指定的事件第一次发生时，once 方法会调用传入的回调函数。
    // resolve - 这是 Promise 构造器提供的函数，当调用它时，
    // 它会将 Promise 的状态标记为已解决（fulfilled）。
    emitter.once(event, resolve);
  });
}

// 调用 waitForEvent 函数并传入 eventEmitter 和 'ready' 作为参数。
// eventEmitter 是一个事件发射器实例，'ready' 是我们想要监听的事件名称。
waitForEvent(eventEmitter, 'ready')
  // 当 eventEmitter 发射 'ready' 事件时，waitForEvent 返回的 Promise 将会被解决。
  // then 方法中的回调函数随后会被调用。
  .then(() => {
    // 在这个回调函数内，可以执行事件发生后需要进行的操作。
    // 此处的 ... 应该被替换为实际的代码，来响应事件。
  });
  // 如果需要处理可能出现的错误，应该在这里添加 .catch 方法来捕获并处理这些错误。

10. 动画完成 - 等待CSS动画结束。

// 定义一个名为 animationEnd 的函数，它接受一个参数：
// element - 一个 DOM 元素，我们将监听这个元素上的 CSS 动画结束事件。
function animationEnd(element) {
  // 返回一个新的 Promise 对象。
  return new Promise(resolve => {
    // 使用 element 的 addEventListener 方法来监听 'animationend' 事件。
    // 当动画结束时，'animationend' 事件会被触发。
    // resolve - 这是 Promise 构造器提供的函数，当调用它时，
    // 它会将 Promise 的状态标记为已解决（fulfilled）。
    // { once: true } - 这是 addEventListener 方法的一个选项对象，
    // 设置 once 为 true 表示监听器在添加之后最多只调用一次。
    element.addEventListener('animationend', resolve, { once: true });
  });
}

// 调用 animationEnd 函数并传入一个通过 document.getElementById 获取的 DOM 元素，
// 'animatedElement' 是该 DOM 元素的 ID。
animationEnd(document.getElementById('animatedElement'))
  // 当动画结束，'animationend' 事件被触发，animationEnd 返回的 Promise 将会被解决。
  // then 方法中的回调函数随后会被调用。
  .then(() => {
    // 在这个回调函数内，可以执行动画结束后需要进行的操作。
    // 此处的 ... 应该被替换为实际的代码，来响应动画结束事件。
  });
  // 如果需要处理可能出现的错误，应该在这里添加 .catch 方法来捕获并处理这些错误。

11. 资源预加载 - 预加载一系列资源。

// 假设 urls 是一个包含多个 URL 字符串的数组，每个 URL 都指向需要获取的资源。
Promise.all(
  // 使用 map 方法遍历 urls 数组，对其中的每个 url 元素执行一个函数。
  urls.map(url =>
    // 对每个 url 调用 fetch 函数。fetch 函数发起一个对该 url 的网络请求。
    // fetch 返回一个 Promise，该 Promise 在请求成功响应时解决，带有一个 Response 对象。
    fetch(url)
  )
  // Promise.all 接收一个 Promise 数组作为参数，并返回一个新的 Promise。
  // 这个新的 Promise 在所有传入的 Promise 都成功解决时解决，
  // 或者在任何一个 Promise 失败时拒绝。
)
.then(responses => {
  // 当所有传入的 Promise（即所有的 fetch 请求）都成功解决时，
  // 这个 then 方法中的回调函数会被调用。
  // responses 是一个数组，包含了按照原始 urls 数组顺序的所有响应对象。
  
  // 在控制台输出一条信息，表明所有资源都已加载。
  console.log('All resources loaded');
})
// 如果在执行 fetch 请求或者 Promise.all 期间发生错误，
// 可以在这里添加一个 .catch 方法来捕获并处理这些错误。

12. 异步循环处理 - 对数组中的每个元素执行异步操作。

// 假设 array 是一个数组，其中包含了需要进行异步处理的多个项。
Promise.all(
  // 使用数组的 map 方法遍历 array 中的每个项。
  array.map(item => 
    // 对每个项调用 asyncProcess 函数。
    // asyncProcess 应该是一个返回 Promise 的函数，表示一个异步操作。
    asyncProcess(item)
  )
  // Promise.all 接收一个包含多个 Promise 的数组作为参数，并返回一个新的 Promise。
  // 这个新的 Promise 在所有传入的 Promise 都成功解决时解决，
  // 或者在任何一个 Promise 失败时拒绝。
)
.then(results => {
  // 当所有传入的 Promise（即所有的异步操作）都成功解决时，
  // 这个 then 方法中的回调函数会被调用。
  // results 是一个数组，包含了按照原始 array 数组顺序的所有异步操作的结果。

  // 在控制台输出一条信息，表明所有项都已处理。
  console.log('Processed all items');
})
// 如果在执行任何异步操作或者 Promise.all 期间发生错误，
// 可以在这里添加一个 .catch 方法来捕获并处理这些错误。

13. 依赖加载 - 等待多个依赖项加载。

// Promise.all 是一个函数，它接受一个 Promise 数组作为参数，并返回一个新的 Promise。
// 这个新的 Promise 在所有传入的 Promise 都成功解决时解决，
// 或者在任何一个 Promise 失败时拒绝。
Promise.all([
  // loadScript 是一个假定的函数，它接受一个脚本的 URL 作为参数，
  // 并返回一个 Promise。这个 Promise 在脚本成功加载时解决，
  // 如果脚本加载失败（例如，因为网络问题或文件不存在），则拒绝。
  loadScript('script1.js'),
  // 同样，对于第二个脚本，也调用 loadScript 函数并返回一个 Promise。
  loadScript('script2.js')
])
.then(() => {
  // 当所有传入的 Promise（即所有的脚本加载操作）都成功解决时，
  // 这个 then 方法中的回调函数会被调用。

  // 在控制台输出一条信息，表明所有脚本都已加载。
  console.log('Scripts loaded');
  // 如果需要，可以在这里执行一些依赖于这两个脚本的代码。
})
// 如果在加载任何脚本或者 Promise.all 期间发生错误，
// 可以在这里添加一个 .catch 方法来捕获并处理这些错误。
// .catch((error) => {
//   // 处理加载脚本过程中发生的错误。
// });

14. 同步代码中的异步请求 - 在同步函数中调用异步请求。

// 定义一个异步函数 syncFunctionWithAsyncCall。
// async 关键字允许函数内部使用 await，并且表明函数本身返回一个 Promise。
async function syncFunctionWithAsyncCall() {
  // 使用 await 关键字等待 fetchData 函数的 Promise 解决。
  // fetchData 是一个假设的异步函数，它从某个数据源获取数据并返回一个 Promise。
  // 当这个 Promise 解决时，其结果值将被赋值给常量 data。
  const data = await fetchData();

  // 将获取的数据打印到控制台。
  // 这一行会在 fetchData 函数的 Promise 解决后执行。
  console.log(data);
}

// 调用定义好的异步函数 syncFunctionWithAsyncCall。
// 由于 syncFunctionWithAsyncCall 是一个异步函数，它返回一个 Promise。
// 这里没有使用 await，因为我们不在一个异步函数内部。
// 如果需要处理可能的异常，可以在调用后面链式添加 .catch() 方法。
syncFunctionWithAsyncCall();

15. 异步数据流处理 - 串行处理一系列异步任务。

// 假设fetchData1是一个返回Promise的函数，这个Promise解决为某些数据。
fetchData1()
  // 当fetchData1的Promise被解决后，会调用then中的回调函数。
  .then(data => {
    // data是fetchData1解决的数据。
    // 使用这些数据调用processStep1函数，该函数可能进行一些处理并返回一个结果或Promise。
    return processStep1(data);
  })
  // processStep1返回的结果（或解决的Promise）传递给下一个then。
  .then(result1 => {
    // result1是processStep1函数的处理结果。
    // 使用这个结果调用fetchData2函数，该函数返回一个新的Promise，
    // 这个Promise解决为另一些数据。
    return fetchData2(result1);
  })
  // 当fetchData2的Promise被解决后，它的结果传递给下一个then。
  .then(data => {
    // data是fetchData2解决的数据。
    // 使用这些数据调用processStep2函数，
    // 该函数可能进行一些处理并返回一个最终结果或Promise。
    return processStep2(data);
  })
  // processStep2返回的结果（或解决的Promise）传递给下一个then。
  .then(result2 => {
    // result2是processStep2函数的处理结果。
    // 最终结果被打印到控制台。
    console.log('Final result:', result2);
  });
  // 注意，这里没有添加.catch方法来处理可能发生的错误，
  // 在实际应用中，你应该添加.catch来捕获并处理链中任何步骤的错误。

16. 错误恢复 - 尝试异步操作，失败后重试。

// 定义一个函数 tryFetchWithRetry，它接受一个URL和重试次数作为参数。
function tryFetchWithRetry(url, retries) {
  // 尝试通过fetch函数从指定的URL获取资源。
  return fetch(url)
    // 如果fetch失败（即捕获到错误），则执行.catch方法中的回调函数。
    .catch(error => {
      // 检查是否还有剩余的重试次数。
      if (retries > 0) {
        // 如果有剩余重试次数，递归调用tryFetchWithRetry函数，
        // 同时将重试次数减1，重新尝试fetch操作。
        return tryFetchWithRetry(url, retries - 1);
      } else {
        // 如果没有剩余重试次数，抛出捕获到的错误。
        throw error;
      }
    });
}

// 使用定义好的函数tryFetchWithRetry，并传入URL和重试次数。
tryFetchWithRetry('https://api.example.com', 3)
  // 如果fetch操作成功，then方法中的回调函数会被调用。
  // 这里的...表示可以根据需要添加处理成功响应的逻辑。
  .then(response => {
    // response是fetch操作成功时的响应对象。
    // 在这里可以添加处理响应的代码。
  })
  // 如果在所有重试后fetch操作仍然失败，catch方法中的回调函数会被调用。
  .catch(error => {
    // error是fetch操作失败时捕获到的错误对象。
    // 在这里可以添加处理错误的代码。
  });

17. 异步条件执行 - 根据异步条件执行不同的操作。

// 假设checkCondition是一个返回Promise的函数，
// 这个Promise解决为一个条件值（true或false）。
checkCondition()
  // checkCondition函数返回的Promise被解决后，会调用then中的回调函数。
  .then(condition => {
    // condition是checkCondition函数解决的值。
    // 根据condition的值（true或false），选择执行不同的异步操作。
    return condition ? asyncOperation1() : asyncOperation2();
    // 如果condition为true，执行asyncOperation1，它返回一个Promise。
    // 如果condition为false，执行asyncOperation2，它也返回一个Promise。
    // 由于我们在then的回调函数中返回了这个Promise，它会被链式处理。
  })
  // 这个then会处理上一个then中返回的Promise的解决结果。
  // 这里的...表示可以根据需要添加更多的处理逻辑。
  .then(result => {
    // result是上一个then中执行的异步操作解决的值。
    // 无论是asyncOperation1还是asyncOperation2的结果，都会在这里处理。
    // 在这里可以添加处理结果的代码。
  });
  // 如果需要，还可以在这里链式调用.catch()来处理可能发生的错误。

18. 异步队列 - 按顺序执行异步任务队列。

// 假设tasks是一个Promise数组，每个Promise解决时返回一个任务的结果。
tasks.reduce(
  // reduce方法接收一个回调函数和一个初始值。
  // promiseChain是上一次迭代中返回的Promise。
  // currentTask是当前迭代中的任务（也是一个Promise）。
  (promiseChain, currentTask) => {
    // 对promiseChain调用then方法来安排下一个任务的执行。
    // chainResults是到目前为止已经完成的所有任务的结果数组。
    return promiseChain.then(chainResults =>
      // 当前任务currentTask执行并解决后，将其结果添加到结果数组中。
      currentTask.then(currentResult => 
        // 使用扩展运算符将已完成的任务结果数组和当前任务的结果合并。
        [...chainResults, currentResult]
      )
    );
  },
  // reduce的初始值是一个解决为一个空数组的Promise。
  // 这是结果数组的起始值，用于存储每个任务的结果。
  Promise.resolve([])
)
.then(arrayOfResults => {
  // 当所有的任务都按顺序完成后，这个then的回调函数会被调用。
  // arrayOfResults是一个包含所有任务结果的数组。
  // 在这里可以添加处理所有结果的代码。
});

19. 异步计算结果缓存 - 缓存异步计算的结果。

// 定义一个对象用作缓存，存储异步获取的数据。
const cache = {};

// 定义一个函数，用于获取键为key的缓存数据。
function getCachedData(key) {
  // 检查缓存中是否存在key对应的数据。
  if (!cache[key]) {
    // 如果缓存中没有对应的数据，调用fetchData函数来获取数据。
    // fetchData函数应该返回一个Promise。
    cache[key] = fetchData(key)
      .catch(() => {
        // 如果在获取数据时出现错误，.catch()会捕获这个错误。
        // 从缓存中删除key对应的条目，这样后续的请求可以尝试重新获取数据。
        delete cache[key];
      });
  }
  // 返回缓存中的数据。由于fetchData返回的是一个Promise，
  // cache[key]也是一个Promise，因此这里返回的是一个Promise对象。
  return cache[key];
}

// 使用getCachedData函数并传入'dataKey'作为参数来获取数据。
getCachedData('dataKey')
  .then(data => {
    // .then()方法定义了一个回调函数，它会在Promise被解决时执行。
    // data参数是Promise解决时传递的值，即缓存的数据。
    // 在这里可以添加处理获取到的数据的代码。
  });
  // 如果有必要，还可以在这里链式调用.catch()来处理可能发生的错误。

20. 异步API封装 - 将回调风格的API转换为Promise风格。

// promisify是一个高阶函数，它接收一个原始函数作为参数。
function promisify(originalFunction) {
  // 返回一个新的函数，该函数接收任意数量的参数（...args）。
  return function (...args) {
    // 新函数返回一个新的Promise对象。
    return new Promise((resolve, reject) => {
      // 向参数列表中添加一个回调函数，这个回调函数遵循Node.js的错误优先回调风格。
      args.push(function (err, result) {
        // 如果回调函数中的err为真，说明原始函数执行时发生了错误。
        if (err) {
          // Promise将被拒绝，错误对象err将被传递给.catch()方法的回调函数。
          reject(err);
        } else {
          // 如果没有错误，表示函数执行成功，result是原始函数返回的结果。
          // Promise将被解决，结果result将被传递给.then()方法的回调函数。
          resolve(result);
        }
      });
      // 使用.apply()方法调用原始函数，确保this指向正确，并传入修改后的参数列表。
      originalFunction.apply(this, args);
    });
  };
}

// 使用promisify函数转换fs.readFile函数。
// fs.readFile是Node.js中读取文件的异步函数，它本身使用回调而不是Promise。
const readFilePromise = promisify(fs.readFile);

// 使用转换后的函数读取'example.txt'文件，指定编码为'utf8'。
readFilePromise('example.txt', 'utf8')
  .then(content => {
    // .then()方法定义了一个回调函数，它会在Promise被resolve时执行。
    // content参数是readFilePromise函数调用成功时传递的文件内容。
    // 在这里可以处理文件内容。
  })
  .catch(error => {
    // .catch()方法定义了一个回调函数，它会在Promise被reject时执行。
    // error参数是readFilePromise函数调用失败时传递的错误对象。
    // 在这里可以处理错误，例如打印错误日志。
  });