如何在resp.blob() Promise resolve时获取Fetch请求路径？

开发者阿泽

2026-8-26

解决在Fetch Blob回调中访问请求路径的问题

你的代码其实已经可以正常访问请求路径了，这里提供几种更清晰的实现方式：

方案一：直接使用现有代码（利用块级作用域特性）

for...of循环中用const声明的path属于每次迭代的块级作用域，异步回调会绑定当前迭代的path值，直接输出即可：

paths = ['1.png', '2.png', '3.png']
for (const path of paths) {
     fetch(path)
          .then(resp => resp.blob())
          .then(blob => {
            console.log('path: ' + path) // 此处path即为当前请求的路径
          })
          .catch((error) => {
            console.log(error)
          })
}

方案二：显式传递路径与Blob

如果想让逻辑更清晰，可以在Promise链式调用中同时返回路径和Blob对象：

paths = ['1.png', '2.png', '3.png']
for (const path of paths) {
     fetch(path)
          .then(resp => {
            // 先获取Blob，再与路径一起返回
            return resp.blob().then(blob => ({ blob, path }))
          })
          .then(({ blob, path }) => {
            console.log('path: ' + path)
            // 可同时处理Blob和路径
          })
          .catch((error) => {
            console.log(error)
          })
}

方案三：使用async/await简化异步逻辑

换成线性的async/await写法，代码可读性更高：

paths = ['1.png', '2.png', '3.png']
async function fetchFiles() {
  for (const path of paths) {
    try {
      const resp = await fetch(path)
      const blob = await resp.blob()
      console.log('path: ' + path)
      // 在这里处理Blob
    } catch (error) {
      console.log(error)
    }
  }
}
fetchFiles()