How to make data request in uniapp

Preface

uniapp is a cross-platform application development framework that supports one-time development and multi-terminal release, including WeChat applet, H5, iOS and Android. It is a good tool for building multi-terminal applications. When developing with uniapp, one of the most commonly used functions is to request data and render the data onto the page. So, how to make data requests in uniapp? Let’s explain step by step below.

Steps

1.Introduce uni.request() Method
First, in the vue.js file, you need to introduce uniapp to provide The uni.request() method is the method for requesting data. Introduce it in the header of the vue.js file

import uni from 'uni.request\'//引入uni-app 通信api

2. Data request syntax
After introducing the uni.request() method, we can Start using this method to make data requests. The data request syntax is as follows:

uni.request({
    url: 'http://www.test.com/api', //请求的地址
    method: 'GET', //请求方法
    data: {
        //请求参数
    },
    header: {
        //请求头
    },
    success: function (res) {
        //成功回调
    },
    fail: function (err) {
        //失败回调
    }
})

Parameter description:

• url: The requested address needs to be enclosed in single quotes or double quotes.
• method: The request method, including GET, POST, etc., needs to be capitalized.
• data: Request parameters, which can be empty.
• header: Request header.
• success: The callback function for successful request, res is the returned data or error information, and data processing needs to be performed in this callback function.
• fail: The callback function for request failure, err is the error message.

3. Data request example
The following is an example to illustrate the entire data request process, including the front-end sending a request to the background, the background accepting the request, the background processing and returning data, and the front-end receiving Data and other steps. In this example, the front end sends a GET request to the background. The request address is http://www.test.com/api, the request parameter is name, and the value is uniapp.

The front-end request code is as follows:

<script>
export default {
    methods: {
        requestData() {
            uni.request({
                url: 'http://www.test.com/api',
                method: 'GET',
                data: {
                    name: 'uniapp'
                },
                header: {
                    'content-type': 'application/json'
                },
                success: function (res) {
                    console.log(res.data)
                },
                fail: function (err) {
                    console.log(err)
                }
            })
        }
    },
}
</script>

The background receiving request code is as follows:

@RestController
@RequestMapping("/api")
public class TestController {

    @GetMapping
    public String test(@RequestParam String name) {
        return name;
    }
}

When the data request is successful, the corresponding data will be printed on the console, which is Data returned by the background.

4. Render data to the page
Finally, after obtaining the data returned from the background, we need to render the data to the page. Here is a simple example to render the requested data to the page. The code is as follows:

<template>
    <view>
        <text>{{name}}</text>
    </view>
</template>
<script>
export default {
    data() {
        return {
            name: ''
        }
    },
    methods: {
        requestData() {
            let _this = this;
            uni.request({
                url: 'http://www.test.com/api',
                method: 'GET',
                data: {
                    name: 'uniapp'
                },
                header: {
                    'content-type': 'application/json'
                },
                success: function (res) {
                    _this.name = res.data;
                },
                fail: function (err) {
                    console.log(err)
                }
            })
        }
    },
    mounted() {
        this.requestData();
    }
}
</script>

When the request is successful, the requested data will be rendered to the page.

Conclusion

Through the above steps, we can make data requests in uniapp and render the data into the page. However, there are many ways to use uniapp to make data requests. For example, the uni.uploadFile() method can be used to upload files, etc. In addition, you can also use third-party plug-ins, such as axios, flyio, etc., to make data requests.

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