uni-app 小程序 Vue3 app.config.globalProperties 自定义方法中无法使用 uni.request

uni-app 小程序 Vue3 app.config.globalProperties 自定义方法中无法使用 uni.request

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

产品分类：uniapp/小程序/微信

app.config.globalProperties.$http = (url, data) => {
const baseUrl = 'http://127.0.0.1:3000/'
uni.request({
url: 'http://127.0.0.1:7001/auth/login/mp'
})
console.log("123456")
};

操作步骤：

uni.request 去掉就没问题

预期结果：

不报错

实际结果：

报错

bug描述：

Vue3，app.config.globalProperties，自定义方法中无法使用 uni.request

更多关于uni-app 小程序 Vue3 app.config.globalProperties 自定义方法中无法使用 uni.request的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 小程序 Vue3 app.config.globalProperties 自定义方法中无法使用 uni.request的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 Vue3 的 app.config.globalProperties 中直接使用 uni.request 确实可能遇到问题，尤其是在小程序环境中。这通常是由于 uni.request 的调用上下文（this）丢失或执行时机不当导致的。

原因分析：

  1. 上下文问题：uni.request 在小程序中依赖正确的执行上下文。在 globalProperties 的方法中直接调用时，可能因作用域变化导致 API 调用异常。
  2. 生命周期时机：globalProperties 的方法可能在应用初始化早期执行，此时部分 uni-app API 尚未完全就绪。

解决方案： 将 uni.request 包装在 Promise 或异步函数中，并确保在正确的生命周期调用。修改示例如下：

// main.js 或 App.vue
app.config.globalProperties.$http = async (url, data) => {
  const baseUrl = 'http://127.0.0.1:3000/';
  try {
    const res = await uni.request({
      url: baseUrl + url,
      data,
      method: 'POST' // 根据需求调整
    });
    return res.data;
  } catch (error) {
    console.error('请求失败:', error);
    throw error;
  }
};

使用示例：

<script setup>
import { getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();
proxy.$http('auth/login/mp', { username: 'test' })
  .then(res => console.log(res))
  .catch(err => console.error(err));
</script>
回到顶部