uniappでデータリクエストを行う方法

はじめに

uniapp は、ワンタイム開発と WeChat アプレット、H5、iOS、Android を含む複数端末のリリースをサポートするクロスプラットフォーム アプリケーション開発フレームワークです。端末アプリケーション。 uniapp を使用して開発する場合、最も一般的に使用される関数の 1 つは、データをリクエストし、そのデータをページにレンダリングすることです。では、uniapp でデータリクエストを行うにはどうすればよいでしょうか?以下、順を追って説明していきましょう。

手順

1.uni.request() メソッドの導入
まず、vue.js ファイルで、次のことを導入する必要があります。 uniapp が提供する uni.request() メソッドは、データをリクエストするためのメソッドです。 vue.js ファイル

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

2 のヘッダーにこれを導入します。データ リクエストの構文
uni.request() メソッドを導入した後、次のことができます。このメソッドを使用してデータ要求を開始します。データ要求の構文は次のとおりです。

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

パラメータの説明:

• url: 要求されたアドレスは一重引用符または二重引用符で囲む必要があります。
• method: GET、POST などのリクエスト メソッドは大文字にする必要があります。
• data: リクエスト パラメータ。空にすることもできます。
• header: リクエストヘッダー。
• success: リクエストが成功した場合のコールバック関数 res は返されたデータまたはエラー情報であり、このコールバック関数内でデータ処理を実行する必要があります。
• fail: リクエスト失敗のコールバック関数、err はエラー メッセージです。

3. データ リクエストの例
次は、バックグラウンドにリクエストを送信するフロントエンド、リクエストを受け入れるバックグラウンド、バックグラウンドを含む、データ リクエスト プロセス全体を示す例です。データを処理して返す、フロントエンドがデータを受信するなどのステップが含まれます。この例では、フロントエンドがバックグラウンドに GET リクエストを送信します。リクエスト アドレスは http://www.test.com/api、リクエスト パラメータは name、値は uniapp です。

フロントエンドのリクエスト コードは次のとおりです。

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

バックグラウンド受信リクエストのコードは次のとおりです。

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

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

データ リクエストが成功すると、対応するデータが送信されます。コンソールに表示されます。これはバックグラウンドから返されたデータです。

4. ページへのデータのレンダリング
最後に、バックグラウンドから返されたデータを取得した後、データをページにレンダリングする必要があります。リクエストされたデータをページにレンダリングする簡単な例を次に示します。コードは次のとおりです:

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

リクエストが成功すると、リクエストされたデータがページにレンダリングされます。

結論

上記の手順により、uniapp でデータ要求を行い、そのデータをページにレンダリングできます。ただし、uniapp を使用してデータ リクエストを行う方法は数多くあります。たとえば、uni.uploadFile() メソッドを使用してファイルをアップロードするなどできます。さらに、axios、flyio などのサードパーティ プラグインを使用してデータ リクエストを行うこともできます。

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