Comment obtenir des données de demande JSON dans Uniapp

Uniapp est un outil de développement d'applications multiplateformes. Il prend en charge le développement simultané de plusieurs plates-formes telles que des mini-programmes, H5 et APP. Lors des requêtes réseau, nous devons généralement obtenir les données JSON renvoyées par la requête. Cet article présentera comment Uniapp obtient les données JSON demandées.

1. Envoyer une requête réseau

Tout d'abord, il existe de nombreuses façons d'envoyer des requêtes réseau dans Uniapp, par exemple en utilisant la méthode uni.request pour envoyer une requête. Voici un exemple :

uni.request({
  url: 'https://api.example.com/user',
  method: 'POST',
  data: {
    username: 'test',
    password: '123456'
  },
  success: function(res) {
    console.log(res);
  },
  fail: function(err) {
    console.log(err);
  }
})

Dans l'exemple ci-dessus, nous avons envoyé une requête POST à ​​'https://api.example.com/user', et les données demandées sont un objet contenant les champs nom d'utilisateur et mot de passe. Après l'envoi réussi, si le serveur renvoie des données JSON, nous pouvons obtenir les données JSON dans la fonction de rappel de réussite.

2. Analyser les données JSON

De manière générale, nous pouvons utiliser directement res.data pour obtenir des données JSON. Mais si le serveur renvoie des données JSON illégales ou renvoie des données qui ne sont pas au format JSON, cette méthode échouera. Par conséquent, après avoir obtenu les données JSON, nous devons les analyser et déterminer si elles sont légales.

Uniapp fournit la méthode JSON.parse(), qui peut analyser une chaîne JSON en un objet JavaScript. Nous pouvons utiliser cette méthode dans la fonction de rappel de réussite pour analyser les données JSON. Voici un exemple :

uni.request({
  url: 'https://api.example.com/user',
  method: 'POST',
  data: {
    username: 'test',
    password: '123456'
  },
  success: function(res) {
    try {
      var data = JSON.parse(res.data);
      console.log(data);
    } catch (e) {
      console.log('返回的不是合法的JSON数据');
    }
  },
  fail: function(err) {
    console.log(err);
  }
})

Dans l'exemple ci-dessus, nous utilisons la méthode JSON.parse() pour analyser res.data et afficher les données analysées sur la console.

3. Obtenir les champs JSON

Nous pouvons obtenir les champs dans les données JSON via l'objet JavaScript analysé, tel que :

uni.request({
  url: 'https://api.example.com/user',
  method: 'POST',
  data: {
    username: 'test',
    password: '123456'
  },
  success: function(res) {
    try {
      var data = JSON.parse(res.data);
      console.log(data.username);
      console.log(data.password);
    } catch (e) {
      console.log('返回的不是合法的JSON数据');
    }
  },
  fail: function(err) {
    console.log(err);
  }
})

Dans l'exemple ci-dessus, nous obtenons les champs de nom d'utilisateur et de mot de passe dans les données JSON et les envoyons vers la console.

4. Utilisez async/await

Les trois étapes ci-dessus sont effectuées dans la fonction de rappel de réussite. Si nous avons de telles opérations dans plusieurs requêtes, le code sera relativement long. Par conséquent, nous pouvons utiliser async/await pour simplifier le code. Voici un exemple :

async function getUser() {
  try {
    const res = await uni.request({
      url: 'https://api.example.com/user',
      method: 'GET'
    });
    const data = JSON.parse(res.data);
    console.log(data);
  } catch (e) {
    console.log(e);
  }
}
getUser();

Dans l'exemple ci-dessus, nous avons défini une fonction asynchrone getUser() et utilisé le mot-clé wait pour attendre que la requête uni.request() soit terminée pour obtenir les données JSON. Si la récupération des données JSON échoue, une exception sera levée. L'utilisation de async/await peut rendre le code plus concis et plus lisible.

Résumé

Cet article présente comment Uniapp obtient les données JSON des requêtes, notamment l'envoi de requêtes réseau, l'analyse des données JSON, l'obtention de champs JSON et l'utilisation de async/await. Lorsque vous développez des applications Uniapp, utilisez ces conseils pour rendre votre code plus élégant et concis.

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!