uniapp 请求接口时如何显示进度条

要在uniapp中实现请求接口时显示进度条，可以使用uni.request方法发送请求，并在其中监听请求的上传和下载进度来更新进度条的显示。

首先，在页面的script部分引入uni.request方法，并定义一个数据属性来保存进度条的进度：

```
import uniRequest from 'uni-request';
export default {
  data() {
    return {
      progress: 0
    }
  },
  methods: {
    requestWithProgress() {
      // 发送请求时显示进度条
      uni.showLoading({
        title: '加载中',
        mask: true
      });
      // 使用uni.request发送请求并监听上传和下载进度
      uniRequest({
        url: 'your_api_url',
        method: 'GET',
        onProgressUpdate: (res) => {
          // 更新进度条
          this.progress = res.progress
          if (res.progress === 100) {
            // 隐藏进度条
            uni.hideLoading()
          }
        }
      }).then(response => {
        // 请求成功处理
      }).catch(error => {
        // 请求失败处理
      })
    }
  }
}
```

然后，在模板中使用uni-progress组件来展示进度条，绑定进度条的进度为data中的progress属性：

```

```

这样，当点击"发送请求"按钮时，就会发送带进度的请求，并在页面中显示进度条。当请求完成时，进度条会隐藏。

请注意，其中的'your_api_url'需要替换为实际的接口地址。对于上传和下载进度的监听，需要后端接口支持返回相关数据。