uniapp構成ネットワークリクエスト

1 はじめに

プラットフォームの制限のため、 axios はアプレットプロジェクトではサポートされておらず、ネイティブ wx.request() API 関数は比較的単純で、インターセプターなどのグローバルカスタマイズ関数はサポートされていません。@escook/request-miniprogram したがって、ネットワークデータリクエストを開始するには、uni-app プロジェクトでサードパーティパッケージを使用することをお勧めします。

公式ドキュメント: @escook/request-miniprogram - npm

2. 設定手順

1. プロジェクトのルートディレクトリで npm インストールを使用します。

npm install @escook/request-miniprogram

図に示すように、node_modules の下に@escookフォルダーがあれば、インストールは成功です。

2. main.js で http を設定する

// 导入网络请求的包
import { $http } from '@escook/request-miniprogram'

uni.$http = $http

// 请求的根路径
$http.baseUrl = 'https://api-hmugo-web.itheima.net'

// 请求拦截器
$http.beforeRequest = function(options) {
  uni.showLoading({
    title: '数据加载中...'
  })
}

// 响应拦截器
$http.afterRequest = function() {
  uni.hideLoading()
}

3. 詳しい説明

インターフェイス要件に従って、一般的に使用されるリクエストタイプは get リクエストと post リクエストです。

res はインターフェイスによって返されるデータで、1. リクエスト結果ステータス (成功) 2. データ (データ) 3. プロンプト (メッセージ) が含まれる場合があります。

get リクエスト uni.$http.get; post リクエスト uni.$http.post

4. 例

home.vueにカルーセルマップを取得するメソッドを追加

export default {
  data() {
    return {
      // 1. 轮播图的数据列表，默认为空数组
      swiperList: [],
    }
  },
  onLoad() {
    // 2. 在小程序页面刚加载的时候，调用获取轮播图数据的方法
    this.getSwiperList()
  },
  methods: {
    // 3. 获取轮播图数据的方法
    async getSwiperList() {
      // 3.1 发起请求
      const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
      // 3.2 请求失败
      if (res.meta.status !== 200) {
        return uni.showToast({
          title: '数据请求失败！',
          duration: 1500,
          icon: 'none',
        })
      }
      // 3.3 请求成功，为 data 中的数据赋值
      this.swiperList = res.message
    },
  },
}

get リクエストの戻り値の例

{
    "message": [
        {
            "image_src": "https://api-ugo-web.itheima.net/pyg/banner1.png",
            "open_type": "navigate",
            "goods_id": 129,
            "navigator_url": "/pages/goods_detail/index?goods_id=129"
        }
    ],
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}