How to get request json data in uniapp

Uniapp is a tool for developing cross-platform applications. It supports the simultaneous development of multiple platforms such as mini programs, H5, and APPs. When making network requests, we usually need to obtain the JSON data returned by the request. This article will introduce how Uniapp obtains the requested JSON data.

1. Send a network request

First of all, there are many ways to send a network request in Uniapp, such as using the uni.request method to send a request. The following is an example:

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

In the above example, we sent a POST request to 'https://api.example.com/user', and the requested data is an object containing the username and password fields. After sending successfully, if the server returns JSON data, we can get the JSON data in the success callback function.

2. Parse JSON data

Generally speaking, we can directly use res.data to obtain JSON data. But if the server returns illegal JSON data, or returns data that is not in JSON format, this method will fail. Therefore, after obtaining the JSON data, we need to parse it and determine whether it is legal.

Uniapp provides the JSON.parse() method, which can parse a JSON string into a JavaScript object. We can use this method in the success callback function to parse JSON data. Here is an example:

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

In the above example, we use the JSON.parse() method to parse res.data and output the parsed data to the console.

3. Get JSON fields

We can get the fields in the JSON data through the parsed JavaScript object, such as:

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

In the above example, we get the JSON username and password fields in the data and output them to the console.

4. Use async/await

The above three steps are performed in the success callback function. If we have such operations in multiple requests, the code will be relatively lengthy. Therefore, we can use async/await to simplify the code. The following is an example:

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

In the above example, we defined an async function getUser() and used the await keyword to wait for the uni.request() request to be completed to obtain JSON data. If retrieval of JSON data fails, an exception will be thrown. Using async/await can make the code more concise and readable.

Summary

This article introduces how Uniapp obtains requested JSON data, including sending network requests, parsing JSON data, obtaining JSON fields and using async/await. When developing Uniapp applications, use these tips to make your code more elegant and concise.

The above is the detailed content of How to get request json data in uniapp. For more information, please follow other related articles on the PHP Chinese website!