使用原生html+css+JavaScript在uniapp中发起网络请求并使用vue3语法做一个圆形进度条进行交互

在 UniApp 中，虽然官方推荐使用 Vue 的组件化思想来构建应用，但是你可以直接使用 HTML、CSS 和 JavaScript 来实现基本功能，包括网络请求和创建圆形进度条。以下是简单的步骤：

**1. 发起网络请求（使用 vanilla JavaScript）**

const request = new XMLHttpRequest();
request.open('GET', 'https://api.example.com/data'); // 替换为你需要的 API 地址
request.onload = function() {
  if (request.status === 200) {
    const data = JSON.parse(request.responseText);
    // 对数据做处理...
  } else {
    console.error(`请求失败，状态码 ${request.status}`);
  }
};
request.send();

**2. 创建圆形进度条（Vue3 实现）**

<template>
  <div class="progress-circle">
    <div :style="{ width: progress + '%' }" class="progress-bar"></div>
  </div>
</template>

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

// 初始化一个表示进度的比例值
const progress = ref(0);

function updateProgress(newProgress) {
  progress.value = newProgress;
}

// 模拟网络请求完成后的回调，更新进度
async function fetchData() {
  await new Promise((resolve) => setTimeout(resolve, 2000)); // 异步模拟加载时间
  const percentage = Math.floor(Math.random() * 100); // 随机生成0-99的进度
  updateProgress(percentage);
}
</script>

<style scoped>
.progress-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-bar {
  background-color: #4caf50; /* 进度条颜色 */
  transition: width 0.5s ease-in-out;
}
</style>

当你点击或有其他事件触发 `fetchData` 函数时，它会模拟网络请求并在请求成功后更新进度条。