Cara menggunakan kaedah uni.request() untuk meminta data dan memaparkannya dalam UniApp

UniApp ialah rangka kerja pembangunan yang menyokong penulisan sekali dan penerbitan pada berbilang terminal, yang boleh membantu kami membangunkan aplikasi yang menyokong berbilang platform dengan cepat. Dalam UniApp, kami boleh menggunakan bahasa JavaScript untuk pembangunan, dan boleh membuat permintaan rangkaian melalui kaedah uni.request() untuk mendapatkan data latar belakang. Artikel ini akan memperkenalkan cara menggunakan kaedah uni.request() untuk meminta dan memaparkan data dalam UniApp.

1. Minta data

Gunakan kaedah uni.request() dalam UniApp untuk menghantar permintaan rangkaian, seperti GET, POST, dll. Pada masa yang sama, UniApp juga menyokong penghantaran JSON, FORM dan format data permintaan lain, dan anda boleh memilih mengikut keperluan anda sendiri.

Langkah asas untuk meminta data adalah seperti berikut:

1 Cetuskan fungsi permintaan rangkaian melalui butang atau komponen lain

2 kaedah permintaan, alamat permintaan, Data permintaan, dsb.); antara muka yang sepadan berdasarkan data yang dikembalikan.

Berikut ialah contoh mudah:

Kod di atas melaksanakan permintaan rangkaian mudah, mendapatkan data maklumat pengguna dengan mengklik butang dan menyerahkan data yang dikembalikan kepada pembolehubah tatasusunan userInfo . Antaranya, URL alamat permintaan dan kaedah permintaan perlu diubah suai mengikut situasi sebenar anda.

2. Paparkan data

<template>
  <view>
    <button @tap="getUserInfo">获取用户信息</button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        userInfo: []
      }
    },
    methods: {
      getUserInfo () {
        uni.request({
          url: 'https://xxx.xxx.xxx', // 请求地址
          method: 'GET', // 请求方式
          success: (res) => { // 请求成功回调函数
            this.userInfo = res.data[0]
          }
        })
      }
    }
  }
</script>

Dalam UniApp, kami boleh menggunakan data binding untuk memaparkan data yang dikembalikan oleh permintaan pada halaman. Anda boleh menggunakan arahan v-for untuk melintasi data dan mengikat data pada setiap komponen.

Berikut ialah contoh lengkap:

Kod di atas melaksanakan fungsi untuk mendapatkan senarai pengguna, klik butang untuk mendapatkan data maklumat pengguna dan memaparkan senarai pengguna pada muka surat. Antaranya, gunakan arahan v-for untuk melintasi pembolehubah tatasusunan userList dan memberikan data senarai pengguna ke halaman.

3. Ringkasan

<template>
  <view>
    <button @tap="getUserList">获取用户列表</button>
    <view v-for="(item, index) in userList" :key="index">
      <text>姓名：{{item.name}}, 年龄：{{item.age}}</text>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        userList: []
      }
    },
    methods: {
      getUserList () {
        uni.request({
          url: 'https://xxx.xxx.xxx', // 请求地址
          method: 'GET', // 请求方式
          success: (res) => { // 请求成功回调函数
            this.userList = res.data
          }
        })
      }
    }
  }
</script>

Artikel ini memperkenalkan secara ringkas cara menggunakan kaedah uni.request() dalam UniApp untuk membuat permintaan rangkaian dan memaparkan data pada halaman. Dalam pembangunan sebenar, kami boleh mengoptimumkan dan mengembangkan kod di atas mengikut keperluan kami sendiri, seperti menambah pengendalian ralat permintaan, menambah maklumat pengepala permintaan, dsb. Pada masa yang sama, anda juga boleh meningkatkan kebolehgunaan semula dan kebolehselenggaraan kod dengan merangkum axios atau perpustakaan permintaan rangkaian lain.

Atas ialah kandungan terperinci Cara menggunakan kaedah uni.request() untuk meminta data dan memaparkannya dalam UniApp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!