如何在UniApp中使用uni.request()方法请求数据并显示

UniApp介绍

UniApp是一个基于Vue.js开发的跨平台应用开发框架，它可以同时开发iOS、Android和H5应用，同时提供了多种快捷开发工具和插件，极大的提升了开发效率，同时也让开发者无需学习多个框架即可跨平台开发应用。

在UniApp中，我们可以使用uni.request()方法进行网络请求，例如获取服务器数据，并将数据渲染到页面上。

请求数据并显示

发送请求

在UniApp中，我们可以使用uni.request()方法发送请求。该方法接收一个对象参数，其中包含以下属性：

url: 请求的地址

method: 请求的方法，例如GET、POST等

data: 请求的参数，可以为对象、数组或字符串

header: 请求头信息

dataType: 返回数据的格式，支持json、text、html、xml和arraybuffer格式，默认为json格式

success: 请求成功时的回调函数

fail: 请求失败时的回调函数

complete: 请求完成时的回调函数，无论请求成功或失败都会执行

例如：

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  data: {
    id: 1
  },
  success: function(res) {
    console.log(res.data);
  },
  fail: function(err) {
    console.log(err);
  }
})

需要注意：

在发送GET请求时，参数会被拼接在URL后面，例如http://example.com?id=1&name=test

在发送POST请求时，参数会被放在请求体中

渲染数据

在请求数据成功后，我们需要将返回的数据渲染到页面中。UniApp中可以使用类似Vue.js的模板语法进行数据绑定，例如：

<template>
  <view>
    <ul>
      <li v-for="item in data" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </view>
</template>
<script>
export default {
  data() {
    return {
      data: []
    }
  },
  methods: {
    getData() {
      uni.request({
        url: 'https://api.example.com/data',
        success: (res) => {
          this.data = res.data
        }
      })
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

在上面的代码中，我们通过v-for指令将返回的数据渲染到页面的ul标签中，通过mounted钩子函数在页面加载完成后调用getData方法，该方法会发送请求并将返回的数据保存到data中，从而触发页面重新渲染。

错误处理

在请求数据时，可能会出现网络错误、请求超时等问题，UniApp提供了fail和complete回调函数用于处理这些问题。

在fail中可以打印错误信息或者提示用户出现错误，例如：

uni.request({
  url: 'https://api.example.com/data',
  success: function(res) {
    console.log(res.data);
  },
  fail: function(err) {
    console.log(err);
    uni.showToast({
      title: '网络错误，请稍后重试',
      icon: 'none'
    })
  }
})

在complete中可以隐藏loading动画、停止下拉刷新等操作，例如：

uni.request({
  url: 'https://api.example.com/data',
  success: function(res) {
    console.log(res.data);
  },
  fail: function(err) {
    console.log(err);
    uni.showToast({
      title: '网络错误，请稍后重试',
      icon: 'none'
    })
  },
  complete: function() {
    uni.hideLoading()
    uni.stopPullDownRefresh()
  }
})

总结

UniApp是一个强大的跨平台应用开发框架，它提供了强大的工具和插件，使开发者可以快速构建应用。通过uni.request()方法可以方便地发送请求并渲染数据到页面中，同时也提供了fail和complete回调函数用于处理错误和完成操作。如果您想学习更多关于UniApp的内容，请参阅官方文档。