处理YouTube缩略图时，如何让循环等待HTTP请求完成再迭代？

你的问题核心是要让异步HTTP请求按顺序执行，而不是同时发起所有请求。原代码里的普通for循环搭配http.get异步操作会导致所有请求同时触发，而且因为闭包问题，回调里的i值最后都会变成数组的长度，无法正确对应每个视频ID。

下面是具体的解决方案：

1. 把异步操作封装为Promise #

首先将获取图片尺寸的逻辑包装成返回Promise的函数，这样就能用async/await来控制执行顺序：

const url = require('url')
const http = require('http')
const sizeOf = require('image-size')

// 封装获取图片尺寸的异步函数
function getImageSize(videoId) {
  return new Promise((resolve, reject) => {
    const imgUrl = `http://img.youtube.com/vi/${videoId}/maxresdefault.jpg`
    const options = url.parse(imgUrl)

    http.get(options, (response) => {
      const chunks = []
      response.on('data', (chunk) => chunks.push(chunk))
      response.on('end', () => {
        try {
          const buffer = Buffer.concat(chunks)
          const dimensions = sizeOf(buffer)
          resolve({ videoId, dimensions })
        } catch (err) {
          reject(err)
        }
      })
    }).on('error', (err) => {
      reject(err)
    })
  })
}

2. 使用async/await实现顺序循环 #

创建一个async函数，在里面用for...of（或普通for循环）遍历数组，每次迭代都await上一个请求完成：

// 示例数组
const myArr = ['ficzsusamA0Mw', 'ficzsusamA0Mw', 'ficzsusamA0Mw', 'ficzsusamA0Mw', 'ficzsusamA0Mw', 'ficzsusamA0Mw', 'ficzsusamA0Mw', 'ficzsusamA0Mw', 'ficzsusamA0Mw', 'ficzsusamA0Mw', 'ficzsusamA0Mw', 'ficzsusamA0Mw', 'ficzsusamA0Mw', 'ficzsusamA0Mw', 'ficzsusamA0Mw']

// 顺序执行的主函数
async function processVideos() {
  for (const [index, videoId] of myArr.entries()) {
    try {
      const result = await getImageSize(videoId)
      console.log(`${index}, ${JSON.stringify(result.dimensions)}`)
    } catch (err) {
      console.error(`处理视频ID ${videoId} 时出错:`, err)
    }
  }
}

// 执行函数
processVideos()

关键说明 #

• Promise封装：把原本的回调式异步逻辑转化为Promise，让async/await可以等待其完成。
• async/await：在async函数中，await会暂停当前函数执行，直到Promise状态变为resolved，这样就能保证每次请求完成后再进入下一次循环。
• 错误处理：用try/catch包裹await操作，能捕获单个请求的错误，避免一个请求失败导致整个循环终止。
• 修正原代码错误：你原代码里的图片URL拼接少了一个闭合的}，已经在示例中修正为${videoId}/maxresdefault.jpg。

内容的提问来源于stack exchange，提问作者seriously