Cara membuat permintaan data dalam uniapp

Kata Pengantar

Uniapp ialah rangka kerja pembangunan aplikasi merentas platform yang menyokong pembangunan sekali dan keluaran berbilang terminal, termasuk applet WeChat, H5, iOS dan Android Ia adalah alat yang baik untuk membina berbilang-terminal. aplikasi terminal. Apabila membangun dengan uniapp, salah satu fungsi yang paling biasa digunakan ialah meminta data dan memaparkan data ke halaman. Jadi, bagaimana untuk membuat permintaan data dalam uniapp? Mari terangkan langkah demi langkah di bawah.

Langkah

1 Perkenalkan kaedah uni.request()
Pertama, dalam fail vue.js, anda perlu memperkenalkan kaedah uni.request() yang disediakan oleh uniapp, iaitu kaedah. untuk meminta data. Perkenalkannya dalam vue.js pengepala fail

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

2. Sintaks permintaan data
Selepas memperkenalkan kaedah uni.request(), kita boleh mula menggunakan kaedah ini untuk membuat permintaan data. Sintaks permintaan data adalah seperti berikut:

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

Perihalan parameter:

• url: Alamat yang diminta perlu disertakan dalam petikan tunggal atau petikan berganda.
• method: Kaedah yang diminta, termasuk GET, POST, dsb., perlu menggunakan huruf besar.
• data: Minta parameter, yang boleh kosong.
• header: Pengepala permintaan.
• success: Fungsi panggil balik untuk permintaan yang berjaya, res ialah data yang dikembalikan atau maklumat ralat dan pemprosesan data perlu dilakukan dalam fungsi panggil balik ini.
• fail: Fungsi panggil balik untuk kegagalan permintaan, err ialah mesej ralat.

3. Contoh permintaan data
Berikut ialah contoh untuk menggambarkan keseluruhan proses permintaan data, termasuk bahagian hadapan menghantar permintaan ke latar belakang, latar belakang menerima permintaan, latar belakang memproses dan memulangkan data, dan bahagian hadapan menerima Data dan langkah-langkah lain. Dalam contoh ini, bahagian hadapan menghantar permintaan GET ke latar belakang Alamat permintaan ialah http://www.test.com/api, parameter permintaan ialah name dan nilainya ialah uniapp.

Kod permintaan bahagian hadapan adalah seperti berikut:

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

Kod permintaan penerimaan latar belakang adalah seperti berikut:

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

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

Apabila permintaan data berjaya, data yang sepadan akan dicetak pada konsol Data ialah data yang dikembalikan oleh latar belakang.

4. Render data ke halaman
Akhir sekali, selepas mendapatkan data yang dikembalikan dari latar belakang, kami perlu memaparkan data ke halaman. Berikut ialah contoh mudah untuk memaparkan data yang diminta ke halaman. Kodnya adalah seperti berikut:

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

Apabila permintaan berjaya, data yang diminta akan dipaparkan ke halaman.

Kesimpulan

Melalui langkah di atas, kami boleh membuat permintaan data dalam uniapp dan menjadikan data ke dalam halaman. Walau bagaimanapun, terdapat banyak cara untuk menggunakan uniapp untuk permintaan data, seperti kaedah uni.uploadFile() yang boleh digunakan untuk memuat naik fail, dsb. Selain itu, anda juga boleh menggunakan pemalam pihak ketiga, seperti axios, flyio, dsb., untuk membuat permintaan data.

Atas ialah kandungan terperinci Cara membuat permintaan data dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!