ユニアプリでデータの受け渡しと取得をリクエストする方法

2年 ago
桜, 春樹
1 minute

UniAppでは、HTTPリクエストを送信してデータをやり取りするためにuni.requestメソッドを使用できます。

リクエストを送信する

uni.request({
  url: 'http://example.com/api',
  method: 'GET', // 请求方法，如GET、POST等
  data: { // 请求参数
    key1: value1,
    key2: value2
  },
  success: (res) => {
    // 请求成功的回调函数
    console.log(res.data) // 获取服务器返回的数据
  },
  fail: (err) => {
    // 请求失败的回调函数
    console.log(err)
  }
})

リクエストURL、メソッド、パラメータを設定してリクエストを実行し、成功時のコールバックでサーバーのレスポンスを取得、失敗時には失敗コールバックでエラーを処理します。

POSTリクエストを実施する場合は、methodを’POST’とし、dataにリクエストパラメータを指定すればOK

Vue.js におけるデータバインディングを使用して、UniApp でデータをフェッチできます。最初に data 内で変数を定義してから、ページテンプレートで {{}} を使用してデータをバインドします。

ページテンプレート

<template>
  <view>
    <text>{{message}}</text>
  </view>
</template>

この文を日本語に自然に言い換えてください。1 つのオプションのみが必要です。

<script>
  export default {
    data() {
      return {
        message: 'Hello UniApp!'
      }
    }
  }
</script>

上記の例のように、data で message 変数を定義してテンプレートで {{message}} を用いることで変数の値を表示できます。JS のコードで message の値を変更するとページ上のテキスト内容がリアルタイムに更新されます。

もちろん、サーバーからのレスポンスデータを取得する必要がある場合は、リクエストが成功した際のコールバック関数内でdataに格納されている変数値を更新すれば、ページは自動で最新のデータを表示するようになります。

bannerAds