uni-app定制中间层

在uni-app中定制中间层通常是为了在前端与后端服务之间插入一层逻辑处理，以便进行请求的统一管理、数据格式转换、权限验证、错误处理等。下面是一个简单的示例，展示如何在uni-app中定制一个请求中间层。

首先，我们需要创建一个中间层服务文件，例如api.js，在这个文件中我们将封装uni.request方法，并添加一些中间层逻辑。

// api.js
import store from '@/store'; // 假设你使用了Vuex进行状态管理

// 创建请求中间件函数
function requestMiddleware(config) {
    // 添加请求头，例如token
    const token = store.getters.token;
    if (token) {
        config.header['Authorization'] = `Bearer ${token}`;
    }

    // 可以在这里添加其他请求前的处理逻辑，例如日志记录
    console.log('Request Config:', config);

    return config;
}

// 创建响应中间件函数
function responseMiddleware(response) {
    // 可以在这里添加统一的错误处理逻辑
    if (response.statusCode !== 200) {
        // 例如，处理401未授权错误，可以跳转到登录页面
        if (response.statusCode === 401) {
            store.commit('logout'); // 假设你有一个logout的mutation
            uni.redirectTo({ url: '/pages/login/login' });
        }

        // 抛出错误，可以在调用处捕获
        throw new Error(`Request failed with status code ${response.statusCode}`);
    }

    // 可以在这里添加其他响应后的处理逻辑，例如数据格式转换
    return response.data;
}

// 封装uni.request方法
export function request(url, method = 'GET', data = {}, config = {}) {
    return new Promise((resolve, reject) => {
        uni.request({
            ...config,
            url,
            method,
            data: method === 'GET' ? { ...config.query, ...data } : data,
            success: (res) => resolve(responseMiddleware(res)),
            fail: (err) => reject(err)
        }).then(config => requestMiddleware(config)); // 注意：这里的then实际上不会改变config，仅作示例
    });
}

在实际使用时，你可以像这样调用封装好的request方法：

// 调用示例
import { request } from '@/utils/api'; // 假设你将api.js放在了utils目录下

request('/api/user/info', 'GET')
    .then(data => {
        console.log('User Info:', data);
    })
    .catch(error => {
        console.error('Error fetching user info:', error);
    });

注意，上述代码示例中then(config => requestMiddleware(config))部分实际上并不会改变请求的config，因为uni.request是异步的，这里的then只是为了展示中间件的调用方式。在实际使用中，请求中间件和响应中间件应该分别处理请求发送前和响应接收后的逻辑。