HbuilderX中调试Vue3项目，请求时抛出异常

Question

在HbuilderX上用mumu模拟器模拟手机调试vue3项目，当我发出请求时，老是抛出异常这是为什么以下是代码：

<template>
  <view class="login-container">
    <!-- 账号输入 -->
    <input 
      v-model="username" 
      placeholder="请输入账号" 
      class="input-box"
    />
    
    <!-- 密码输入 -->
    <input 
      v-model="password" 
      placeholder="请输入密码" 
      type="password"
      class="input-box"
    />
    
    <!-- 登录按钮 -->
    <button 
      @click="handleLogin"
      class="login-btn"
      :disabled="loading"
    >{{ loading ? '登录中...' : '登录' }}</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const username = ref('')
const password = ref('')
const loading = ref(false)

const handleLogin = async () => {
  if (!username.value || !password.value) {
    uni.showToast({
      title: '请输入账号和密码',
      icon: 'none'
    })
    return
  }

  loading.value = true
  
  try {
    const [err, res] = await uni.request({
      url: 'http://10.121.131.184:8080/user/login',
      method: 'POST',
      data: {
        username: username.value,
        password: password.value
      },
      header: {
        'Content-Type': 'application/json'
      }
    })

    if (err) {
      throw new Error(err.errMsg || '请求失败')
    }

    console.log('登录响应:', res.data)
    
    if (res.data.status === 'success') {
      uni.showToast({
        title: '登录成功'
      })
      uni.navigateTo({
        url: '/pages/home/index'
      })
    } else {
      uni.showToast({
        title: res.data.message || '登录失败',
        icon: 'none'
      })
    }
  } catch (e) {
    console.error('登录错误:', e)
    uni.showToast({ 
      title: '网络错误: ' + (e.message || '未知错误'), 
      icon: 'none' 
    })
  }
  loading.value = false
}
</script>

<style>
.login-container {
  padding: 40rpx;
}

.input-box {
  height: 80rpx;
  border: 1rpx solid #ddd;
  margin-bottom: 30rpx;
  padding: 0 20rpx;
}

.login-btn {
  height: 80rpx;
  background-color: #3a7afe;
  color: white;
}

.login-btn[disabled] {
  opacity: 0.6;
}
</style>

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

HbuilderX中调试Vue3项目，请求时抛出异常

你在HbuilderX中使用mumu模拟器调试Vue3项目，请求时抛出异常，这可能是由于模拟器的网络环境问题或Vue3项目的配置问题引起的。

首先，可以尝试在mumu模拟器中启用网络代理，或者在HbuilderX中配置网络代理，来解决网络请求的问题。

其次，可以检查Vue3项目的网络请求配置，确保正确地配置了请求的域名、端口、方法等信息。

如果问题仍然存在，可以尝试使用Vue3的网络请求库，例如axios或vue-axios，来发送请求。

如果你提供了代码，我可以更好地帮助你解决问题。