如何在Nuxt 3的useFetch中获取响应头？

嘿，我之前也从Nuxt2+Axios迁移到Nuxt3+useFetch，刚好碰到过这个问题，给你捋捋怎么实现～

useFetch默认返回的data、pending这些里确实没有直接暴露响应头，但我们可以通过它的**onResponse钩子**来拿到完整的响应对象，包括headers信息，刚好能替代你原来Axios里的逻辑。

直接给你上迁移后的代码示例，你可以照着改：

// 先定义两个ref用来存文件名和blob，方便组件里使用
const fileInfo = ref({
  filename: '',
  blob: null
})

const { data, pending, error, refresh } = useFetch(url, {
  responseType: 'arraybuffer', // 和原来Axios的配置一致
  onResponse: ({ response }) => {
    // 从响应头里提取文件名
    const contentDisposition = response.headers.get('content-disposition')
    fileInfo.value.filename = contentDisposition?.match(/filename="([\w\d_\-.]*)"/)?.[1] || ''
    
    // 创建Blob对象
    fileInfo.value.blob = new Blob([response._data], {
      type: response.headers.get('content-type') || response._data.type
    })
  }
})

这里要注意几个点：

• response._data就是我们要的arraybuffer格式的响应体，对应原来Axios里的response.data
• 用response.headers.get('xxx')来获取指定响应头，这是标准Fetch API的写法
• 如果是跨域请求，要确保服务器配置了Access-Control-Expose-Headers，把content-disposition加进去，不然前端拿不到这个自定义头，这个和Axios时代的限制是一样的

这样就能完美复刻你原来Axios里的逻辑啦，试试吧！

备注：内容来源于stack exchange，提问作者Tim