So erhalten Sie Anforderungs-JSON-Daten in Uniapp

Uniapp ist ein Tool zur Entwicklung plattformübergreifender Anwendungen. Es unterstützt die gleichzeitige Entwicklung mehrerer Plattformen wie Miniprogramme, H5 und APPs. Bei Netzwerkanfragen müssen wir normalerweise die von der Anfrage zurückgegebenen JSON-Daten abrufen. In diesem Artikel wird erläutert, wie Uniapp die angeforderten JSON-Daten erhält.

1. Senden Sie eine Netzwerkanfrage

Zunächst gibt es viele Möglichkeiten, Netzwerkanfragen in Uniapp zu senden, beispielsweise die Verwendung der uni.request-Methode zum Senden einer Anfrage. Hier ist ein Beispiel:

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);
  }
})

Im obigen Beispiel haben wir eine POST-Anfrage an „https://api.example.com/user“ gesendet und die angeforderten Daten sind ein Objekt, das die Felder Benutzername und Passwort enthält. Wenn der Server nach erfolgreichem Senden JSON-Daten zurückgibt, können wir die JSON-Daten in der Erfolgsrückruffunktion abrufen.

2. JSON-Daten analysieren

Im Allgemeinen können wir res.data direkt verwenden, um JSON-Daten zu erhalten. Wenn der Server jedoch illegale JSON-Daten zurückgibt oder Daten zurückgibt, die nicht im JSON-Format vorliegen, schlägt diese Methode fehl. Daher müssen wir die JSON-Daten nach Erhalt analysieren und feststellen, ob sie legal sind.

Uniapp bietet die Methode JSON.parse(), die einen JSON-String in ein JavaScript-Objekt analysieren kann. Wir können diese Methode in der Erfolgsrückruffunktion verwenden, um JSON-Daten zu analysieren. Hier ist ein Beispiel:

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);
  }
})

Im obigen Beispiel verwenden wir die Methode JSON.parse(), um res.data zu analysieren und die analysierten Daten an die Konsole auszugeben.

3. JSON-Felder abrufen

Wir können die Felder in den JSON-Daten über das analysierte JavaScript-Objekt abrufen, wie zum Beispiel:

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);
  }
})

Im obigen Beispiel erhalten wir die Benutzernamen- und Passwortfelder in den JSON-Daten und geben sie an aus die Konsole.

4. Verwenden Sie async/await

Die oben genannten drei Schritte werden in der Erfolgsrückruffunktion ausgeführt. Wenn wir solche Vorgänge in mehreren Anfragen haben, ist der Code relativ lang. Daher können wir async/await verwenden, um den Code zu vereinfachen. Hier ist ein Beispiel:

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();

Im obigen Beispiel haben wir eine asynchrone Funktion getUser() definiert und das Schlüsselwort „await“ verwendet, um auf den Abschluss der uni.request()-Anfrage zu warten, um JSON-Daten zu erhalten. Wenn der Abruf von JSON-Daten fehlschlägt, wird eine Ausnahme ausgelöst. Die Verwendung von async/await kann den Code prägnanter und lesbarer machen.

Zusammenfassung

In diesem Artikel wird vorgestellt, wie Uniapp Anforderungs-JSON-Daten erhält, einschließlich des Sendens von Netzwerkanforderungen, des Parsens von JSON-Daten, des Abrufens von JSON-Feldern und der Verwendung von async/await. Nutzen Sie bei der Entwicklung von Uniapp-Anwendungen diese Tipps, um Ihren Code eleganter und prägnanter zu gestalten.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie Anforderungs-JSON-Daten in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!