uniappでリクエストjsonデータを取得する方法

Uniapp は、クロスプラットフォーム アプリケーションを開発するためのツールで、ミニ プログラム、H5、APP などの複数のプラットフォームの同時開発をサポートします。ネットワークリクエストを行う場合、通常リクエストで返されるJSONデータを取得する必要がありますが、この記事ではUniappがリクエストされたJSONデータを取得する方法を紹介します。

1. ネットワーク リクエストを送信する

まず、Uniapp でネットワーク リクエストを送信するには、uni.request メソッドを使用してリクエストを送信するなど、さまざまな方法があります。以下は例です:

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

上の例では、POST リクエストを「https://api.example.com/user」に送信しました。リクエストされたデータはユーザー名とパスワードを含むオブジェクトです。田畑。送信が成功した後、サーバーが JSON データを返した場合は、成功コールバック関数で JSON データを取得できます。

2. JSON データを解析する

一般的に、res.data を直接使用して JSON データを取得できます。ただし、サーバーが不正な JSON データを返した場合、または JSON 形式ではないデータを返した場合、このメソッドは失敗します。したがって、JSON データを取得した後、それを解析して合法かどうかを判断する必要があります。

Uniapp は、JSON 文字列を JavaScript オブジェクトに解析できる JSON.parse() メソッドを提供します。このメソッドを成功コールバック関数で使用して、JSON データを解析できます。以下に例を示します。

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

上の例では、JSON.parse() メソッドを使用して res.data を解析し、解析されたデータをコンソールに出力します。

3. JSON フィールドの取得

解析された JavaScript オブジェクトを通じて、次のような JSON データのフィールドを取得できます:

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

上の例では、データ内の JSON ユーザー名とパスワードのフィールドを抽出し、コンソールに出力します。

4. async/await を使用する

上記の 3 つの手順は成功コールバック関数で実行されますが、複数のリクエストでこのような操作を行う場合、コードは比較的長くなります。したがって、async/await を使用してコードを簡素化できます。以下に例を示します。

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

上の例では、非同期関数 getUser() を定義し、await キーワードを使用して uni.request() リクエストが完了して JSON データを取得するのを待ちました。 JSON データの取得に失敗した場合は、例外がスローされます。 async/await を使用すると、コードがより簡潔で読みやすくなります。

概要

この記事では、ネットワーク リクエストの送信、JSON データの解析、JSON フィールドの取得、async/await の使用など、Uniapp がリクエストされた JSON データを取得する方法を紹介します。 Uniapp アプリケーションを開発するときは、次のヒントを使用してコードをよりエレガントで簡潔にしてください。

以上がuniappでリクエストjsonデータを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。