uni-app 需要一个同步请求阻塞的插件

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app 需要一个同步请求阻塞的插件

需要一个同步请求阻塞的插件，目前uniapp的request很多业务场景需求实现不了，即使真要实现，代码不能复用，得把所有代码写在一个文件里。

就算把jquery给弄进来都可以。只需要同步阻塞请求就成。。。

Harmonyos Next教程
4 回复

用es6的await啊，不想让界面操作可以用uni.showLoading


要是可以用，就用了。关键核心需求是 一个请求只要没完成，全世界都得等着，不准运行。。。。我要的就这种。。。

连骨架屏、跳转页面、用v-if显示loading状态之类的都不能用就没办法了

在uni-app中进行同步请求阻塞操作并不推荐，因为JavaScript本身是基于事件循环的单线程模型，同步阻塞请求会阻塞整个线程，导致用户体验极差，甚至可能引发应用崩溃。不过，如果你确实有这样的需求（例如在某些特定的同步逻辑处理中），可以通过一些技术手段模拟同步请求的行为。这里提供一种基于Promise和async/await的解决方案，虽然它本质上是异步的，但可以通过逻辑控制实现类似同步的效果。

使用async/await模拟同步请求

虽然JavaScript不支持真正的同步HTTP请求，但你可以使用async/await语法来等待异步请求完成，从而在一定程度上模拟同步行为。以下是一个示例，展示了如何在uni-app中使用uni.request进行网络请求，并通过async/await等待请求完成：

// 定义一个异步函数来封装请求
async function fetchData(url) {
    try {
        const response = await uni.request({
            url: url,
            method: 'GET',
            success: (res) => {
                return res.data;
            },
            fail: (err) => {
                throw new Error(err.errMsg);
            }
        });
        return response;
    } catch (error) {
        console.error('请求失败:', error);
        throw error;
    }
}

// 使用该函数并处理返回的数据
(async () => {
    try {
        const data = await fetchData('https://api.example.com/data');
        console.log('请求成功, 数据:', data);
        // 在这里处理你的数据，由于await的存在，下面的代码会在请求完成后执行
    } catch (error) {
        console.error('处理数据时发生错误:', error);
    }
})();

注意事项

  1. 避免在主线程中长时间阻塞：尽管上述方法看似同步，但实际上它不会阻塞事件循环，因为await会让出控制权给事件循环，直到Promise解决。然而，如果请求时间过长，仍然可能影响用户体验。

  2. 错误处理：务必妥善处理网络请求中的错误，以避免应用崩溃。

  3. 考虑用户体验：对于需要等待网络请求的场景，考虑使用加载动画或提示信息来告知用户正在加载数据。

  4. 替代方案：如果可能，重新设计你的应用逻辑以避免需要同步请求的情况。例如，可以使用状态管理（如Vuex）和条件渲染来管理数据加载状态。

总之，尽管可以通过技术手段模拟同步请求的行为，但最佳实践是遵循JavaScript的异步编程模型，以确保应用的性能和响应性。

回到顶部