Comment utiliser la méthode uni.request() pour demander des données et les afficher dans UniApp

UniApp est un framework de développement qui prend en charge l'écriture unique et la publication sur plusieurs terminaux, ce qui peut nous aider à développer rapidement des applications prenant en charge plusieurs plates-formes. Dans UniApp, nous pouvons utiliser le langage JavaScript pour le développement et effectuer des requêtes réseau via la méthode uni.request() pour obtenir des données de fond. Cet article explique comment utiliser la méthode uni.request() pour demander et afficher des données dans UniApp.

1. Demander des données

Utilisez la méthode uni.request() dans UniApp pour envoyer des requêtes réseau. Il existe de nombreuses méthodes de requête, telles que : GET, POST, etc. Dans le même temps, UniApp prend également en charge l'envoi de JSON, FORM et d'autres formats de données de demande, et vous pouvez choisir en fonction de vos propres besoins.

Les étapes de base pour demander des données sont les suivantes :

1. Déclenchez la fonction de demande de réseau via un bouton ou d'autres composants ;

2. Écrivez les paramètres de demande (tels que la méthode de demande, l'adresse de demande, les données de demande, etc.) ;

3. Appelez uni. La méthode request() envoie une requête réseau et reçoit la valeur de retour ;

4. Affichez l'interface correspondante en fonction des données renvoyées.

Ce qui suit est un exemple simple :

<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>

Le code ci-dessus implémente une simple requête réseau, obtient les données d'informations utilisateur en cliquant sur un bouton et attribue les données renvoyées à la variable du tableau userInfo. Parmi eux, l'URL de l'adresse de la demande et la méthode de demande doivent être modifiées en fonction de votre situation réelle.

2. Afficher les données

Dans UniApp, nous pouvons utiliser la liaison de données pour afficher les données renvoyées par la requête sur la page. Vous pouvez utiliser la directive v-for pour parcourir les données et lier les données à chaque composant.

Ce qui suit est un exemple complet :

<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>

Le code ci-dessus implémente une fonction pour obtenir une liste d'utilisateurs, cliquez sur le bouton pour obtenir des données d'informations sur l'utilisateur et affichez la liste d'utilisateurs sur la page. Parmi eux, utilisez l'instruction v-for pour parcourir la variable du tableau userList et restituer les données de la liste d'utilisateurs sur la page.

3. Résumé

Cet article présente brièvement comment utiliser la méthode uni.request() dans UniApp pour effectuer des requêtes réseau et afficher des données sur la page. Dans le développement réel, nous pouvons optimiser et étendre le code ci-dessus en fonction de nos propres besoins, comme l'ajout de la gestion des erreurs de requête, l'ajout d'informations d'en-tête de requête, etc. Dans le même temps, vous pouvez également améliorer la réutilisabilité et la maintenabilité du code en encapsulant axios ou d'autres bibliothèques de requêtes réseau.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!