How to use uni.request() method to request data and display it in UniApp

UniApp is a development framework that supports writing once and publishing on multiple terminals, which can help us quickly develop applications that support multiple platforms. In UniApp, we can use JavaScript language for development, and can make network requests through the uni.request() method to obtain background data. This article will introduce how to use the uni.request() method to request and display data in UniApp.

1. Request data

Use the uni.request() method in UniApp to send network requests. There are many request methods, such as: GET, POST, etc. At the same time, UniApp also supports sending JSON, FORM and other request data formats, and you can choose according to your own needs.

The basic steps for requesting data are as follows:

1. Trigger the network request function through button or other components;

2. Write request parameters (such as request method, request address, Request data, etc.);

3. Call the uni.request() method to send a network request and receive the return value;

4. Display the corresponding interface based on the returned data.

The following is a simple example:

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

The above code implements a simple network request, obtains user information data by clicking a button, and assigns the returned data to the userInfo array variable. Among them, the request address URL and request method need to be modified according to your actual situation.

2. Display data

In UniApp, we can use data binding to display the data returned by the request on the page. You can use the v-for directive to traverse the data and bind the data to each component.

The following is a complete example:

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

The above code implements a function to obtain a user list, click the button to obtain user information data, and display the user list on the page. Among them, use the v-for instruction to traverse the userList array variable and render the user list data to the page.

3. Summary

This article briefly introduces how to use the uni.request() method in UniApp to make network requests and display data on the page. In actual development, we can optimize and expand the above code according to our own needs, such as adding request error handling, adding request header information, etc. At the same time, you can also improve code reusability and maintainability by encapsulating axios or other network request libraries.

The above is the detailed content of How to use uni.request() method to request data and display it in UniApp. For more information, please follow other related articles on the PHP Chinese website!