uniapp 配置网络请求并使用请求轮播图

由于平台的限制,小程序项目中不支持 axios,而且原生的 wx.request() API 功能较为简单,不支持拦截器等全局定制的功能。因此,建议在 uni-app 项目中****使用 @escook/request-miniprogram 第三方包发起网络数据请求。

官方文档:@escook/request-miniprogram - npm (npmjs.com)

1、安装 相应的包

javascript 复制代码
1、安装一个npm包管理文件:
npm init -y

2、安装我们这个网络请求第三方工具
npm i @escook/request-miniprogram

2、导入 $http 对象

javascript 复制代码
import { $http } from '@escook/request-miniprogram'

uni.$http = $http

3、配置 请求根路径、请求拦截器

javascript 复制代码
// 2、配置请求根路径
$http.baseUrl = 'https://api-hmugo-web.itheima.net'

// 3、请求开始之前做一些事情
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}

// 4、请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}

4、使用 网络请求

先在pages下建立需要的文件夹,再在这些文件夹上右键点击新建页面,创建就行

html 复制代码
<template>
  <view>
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item v-for="(item, i) in swiperList" :key="i">
        <view class="swiper-item">
          <!-- 动态绑定图片的 src 属性 -->
          <image :src="item.image_src"></image>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

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

<style lang="scss">
  swiper {
    height: 330rpx;

    .swiper-item,
    image {
      width: 100%;
      height: 100%;
    }
  }
</style>
相关推荐
断墨先生1 小时前
uniapp—android原生插件开发(3Android真机调试)
android·uni-app
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
阿伟来咯~8 小时前
一些 uniapp相关bug
uni-app·bug
计算机-秋大田9 小时前
基于Spring Boot的船舶监造系统的设计与实现,LW+源码+讲解
java·论文阅读·spring boot·后端·vue
丁总学Java11 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
瑶琴AI前端11 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen86812 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650212 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
Yaml419 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
尚梦19 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app