service.interceptors.response.use((response) => { return response.data }, err)转化vue3

在Vue 3中，如果你想要实现类似的功能，即处理响应拦截，你可以使用`axios`库结合Vue的插件`vue-axios`或者直接在组件中使用`useEffect`和`axios`。这里是一个简单的例子，说明如何在Vue组件中替换给定的Interceptor：

import axios from 'axios'
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const service = axios.create({ // 创建axios实例
      baseURL: 'your-base-url', // 如果有baseURL
      headers: {'Content-Type': 'application/json'}, // 设置默认头信息
    })

    // 添加全局响应拦截器
    service.interceptors.response.use(
      (response) => {
        // 对响应数据进行处理
        return response.data;
      },
      (error) => {
        // 处理错误
        console.error('Error:', error);
        return Promise.reject(error.response || error); // 返回错误信息
      }
    );

    // 在需要的地方发送请求
    async function fetchData() {
      try {
        const result = await service.get('/api/endpoint');
        return result.data;
      } catch (error) {
        console.error('Failed to fetch data:', error);
      }
    }

    // 使用useEffect在组件挂载后自动发送请求并处理结果
    useEffect(() => {
      fetchData();
    }, []);

    return {
      fetchData,
    };
  }
})

在这个例子中，`fetchData`函数就是原来的`(response) => response.data`部分，而错误处理则在第二个回调函数中实现。记得安装`axios`如果还没有的话，通常可以使用`npm install axios`.