uni-app 使用拦截器修改返回值时使用promise方法接收和callback回调接收均无效果

开发环境	版本号	项目创建方式
Windows	Win11	HBuilderX

产品分类：uniapp/H5

浏览器平台：Edge

浏览器版本：Microsoft Edge 版本 126.0.2592.87 (正式版本) (64 位)

HBuilderX类型：正式

HBuilderX版本号：4.36

示例代码：

const httpInterceptor={  
    invoke(options:UniApp.RequestOptions){  
        if(!options.url.startsWith("http")){  
            options.url=BASEURL+options.url  
        }  
        options.header={  
            ...options.header,  
            "source-client":"app"  
        }  
    },  
    returnValue(res){  
        console.log(res instanceof Promise)  
        return res.data  
    },success(args){  
        return args.data={}  
    }  
}  

uni.addInterceptor("request",httpInterceptor)

uni.addInterceptor({  
  returnValue(args) {  
    // 只返回 data 字段  
    return args.data  
  }  
})

uni.request({  
            method:"GET",  
            url:"https://pcapi-xiaotuxian-front-devtest.itheima.net/home/banner",  
        }).then(res=>{console.log("then",res)}).catch(err=>{console.error("catch",err)})

操作步骤：

使用上述代码，运行，且参照官方代码中，https://uniapp.dcloud.net.cn/api/interceptor.html，无拦截器api名称，也无效

预期结果：

打印：{code: ‘1’, msg: ‘操作成功’, result: Array(5)}

实际结果：

打印了：{data: {…}, statusCode: 200, header: {…}, cookies: Array(0), errMsg: ‘request:ok’}

bug描述：

uni.addInterceptor({
returnValue(args) {
// 只返回 data 字段
return args.data
}
})
方法无效

htzhanglong 1楼•16 小时前

经过测试，返回一个新的promise有效 ‘’‘ uni.addInterceptor(“request”,{ returnValue(res){ console.log(“拦截器pro”) return new Promise((r,j)=>{ res.then(Response=>{ r(Response.data) }) }) } }) ’‘’

phonegap100 2楼•16 小时前

在 uni-app 中使用拦截器修改返回值时，如果遇到 Promise 方法和 callback 回调均无效的情况，可能是由于拦截器的配置或使用方式有误。下面是一个正确配置拦截器并修改返回值的示例代码，使用 axios 作为 HTTP 请求库（uni-app 常常结合 axios 使用）。

首先，确保你已经安装了 axios：

npm install axios

然后，在项目的某个文件中（例如 main.js 或单独的请求配置文件），配置拦截器：

import axios from 'axios';

// 创建 axios 实例
const instance = axios.create({
    baseURL: 'https://api.example.com', // 替换为你的 API 基础路径
    timeout: 10000,
});

// 请求拦截器
instance.interceptors.request.use(
    config => {
        // 在发送请求之前做些什么，例如添加 token
        return config;
    },
    error => {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 响应拦截器
instance.interceptors.response.use(
    response => {
        // 对响应数据做些什么，例如修改返回的数据结构
        const data = response.data;
        // 假设后端返回的数据结构是 {code, message, data}，我们希望直接获取 data 字段
        if (data && data.code === 200) {
            return Promise.resolve(data.data); // 修改返回值
        } else {
            return Promise.reject(new Error(data.message || 'Error'));
        }
    },
    error => {
        // 对响应错误做些什么
        return Promise.reject(error);
    }
);

// 导出 axios 实例
export default instance;

在组件中使用这个配置好的 axios 实例：

import axios from '@/path/to/your/axiosInstance'; // 替换为实际路径

export default {
    methods: {
        async fetchData() {
            try {
                const result = await axios.get('/endpoint'); // 发送 GET 请求
                console.log('Data:', result); // 这里应该直接打印出修改后的 data 字段
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        }
    }
};

上述代码展示了如何在 uni-app 中配置 axios 拦截器来修改响应数据，并确保使用 Promise 方法接收返回值。注意以下几点：

确保拦截器正确配置在 axios 实例上。
在响应拦截器中，使用 Promise.resolve 和 Promise.reject 来确保返回值和错误处理的一致性。
在组件中使用 async/await 语法发送请求，并正确处理 try/catch 块中的返回值和错误。