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

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

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

  • 1、安装 相应的包

1、安装一个npm包管理文件:
npm init -y2、安装我们这个网络请求第三方工具
npm i @escook/request-miniprogram

  • 2、导入 $http 对象

import { $http } from '@escook/request-miniprogram'uni.$http = $http

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

// 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下建立需要的文件夹,再在这些文件夹上右键点击新建页面,创建就行 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/111961.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

宏观经济和风电预测误差分析(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

springboot1.5.12升级至2.6.15

首先&#xff0c;加入springboot升级大版本依赖&#xff0c;会在升级过程中打印出错日志提示&#xff08;升级完毕可去除&#xff09; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-properties-migrator</art…

基于龙格-库塔算法优化的BP神经网络(预测应用) - 附代码

基于龙格-库塔算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于龙格-库塔算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.龙格-库塔优化BP神经网络2.1 BP神经网络参数设置2.2 龙格-库塔算法应用 4.测试结果&#xff…

The Cherno——OpenGL

The Cherno——OpenGL 1. 欢迎来到OpenGL OpenGL是一种跨平台的图形接口&#xff08;API&#xff09;&#xff0c;就是一大堆我们能够调用的函数去做一些与图像相关的事情。特殊的是&#xff0c;OpenGL允许我们访问GPU&#xff08;Graphics Processing Unit 图像处理单元&…

C++异常

文章目录 C异常异常语法代码示例 栈解旋示例代码 noexcept代码示例 异常的声明周期示例代码 异常的多态使用代码示例 C标准异常库代码示例 重写自己的异常示例代码 C异常 异常是处理程序中的错误。所谓的错误时指程序运行的过程中发生的一些异常事件(如&#xff1a;除零错误&a…

jenkins运行pytest测试用例脚本报错:没有权限,无法写日志PermissionError:[Error 13]Permission denied

报错信息&#xff1a; PermissionError:[Error 13]Permission denied&#xff1a;‘/var/jenkins_home/workspace/deleverySystem/Delivery_System/out_files/logs/waimai_20230823.log’ 解决方法&#xff1a; 在jenkins容器内部输入 chmod -R 777 /var/jenkins_home/works…

反射机制-体会反射的动态性案例(尚硅谷Java学习笔记)

// 举例01 public class Reflect{ // 静态性 public Person getInstance(){return new Person(); }// 动态性 public T<T> getInstance(String className) throws Exception{Calss clzz Class.forName(className);Constructor con class.getDeclaredConstructor();con…

基于ssm+vue汽车售票网站源码和论文

基于ssmvue汽车售票网站源码和论文088 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让…

8.28作业

定义一个基类 Animal&#xff0c;其中有一个虚函数 perform()&#xff0c;用于在子类中实现不同的表演行为。 #include <iostream>using namespace std; class Animal { public:Animal() {}virtual void perform(){} }; class Monkey:public Animal { public:Monkey() {…

python自动化测试-自动化基本技术原理

1 概述 在之前的文章里面提到过&#xff1a;做自动化的首要本领就是要会 透过现象看本质 &#xff0c;落实到实际的IT工作中就是 透过界面看数据。 掌握上面的这样的本领可不是容易的事情&#xff0c;必须要有扎实的计算机理论基础&#xff0c;才能看到深层次的本质东西。 …

骨传导耳机有什么副作用? 骨传导耳机对身体有损伤吗

根据目前的科学研究和经验&#xff0c;骨传导耳机被认为是相对安全的使用设备&#xff0c;不会引起副作用&#xff0c;也不会对身体造成损伤&#xff0c;相比会对我们的耳朵听力起到一定的保护作用。 但是&#xff0c;个体差异和特殊情况可能会影响人们对骨传导耳机的感受与反应…

选择结构(个人学习笔记黑马学习)

if语句 单行if语句 用户输入分数&#xff0c;如果分数大于600&#xff0c;视为考上一本大学&#xff0c;在屏幕上输出 #include <iostream> using namespace std;int main() {int score 0;cout << "请用户输入分数" << endl;cin >> score;c…

探索OLED透明屏的优缺点:引领科技未来的革命性突破

OLED透明屏作为一项革命性的创新技术&#xff0c;其令人惊叹的透明度和柔性性能引起了全球范围内的关注。 然而&#xff0c;了解OLED透明屏的优缺点对于我们全面认识其在科技未来中的地位至关重要。 今天&#xff0c;尼伽将深入探讨OLED透明屏的优势和限制&#xff0c;并借助…

C++新经典 | C语言

目录 一、基础之查漏补缺 1.float精度问题 2.字符型数据 3.变量初值问题 4.赋值&初始化 5.头文件之<> VS " " 6.逻辑运算 7.数组 7.1 二维数组初始化 7.2 字符数组 8.字符串处理函数 8.1 strcat 8.2 strcpy 8.3 strcmp 8.4 strlen 9.函数 …

Delphi 11.3 FMX 多设备平台中使用 TGrid 实现类似 TDBGrid 的效果

Delphi Firemonkey 中 TDBGrid 这个控件已经没有了。如何实现类似这个效果呢。其实可以用TGrid 来实现。以下用 11.3 来讲解。 查询里面用到的 connection 和 query 等控件那些一般的数据库用法&#xff0c;就不做过多描述了。请参考其他资料。 方法一.通过界面配置来实现 在…

计算机竞赛 基于人工智能的图像分类算法研究与实现 - 深度学习卷积神经网络图像分类

文章目录 0 简介1 常用的分类网络介绍1.1 CNN1.2 VGG1.3 GoogleNet 2 图像分类部分代码实现2.1 环境依赖2.2 需要导入的包2.3 参数设置(路径&#xff0c;图像尺寸&#xff0c;数据集分割比例)2.4 从preprocessedFolder读取图片并返回numpy格式(便于在神经网络中训练)2.5 数据预…

Docker从认识到实践再到底层原理(一)|技术架构

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…

Linux 进程

目录 进程与程序main()函数由谁调用&#xff1f;程序如何结束&#xff1f;何为进程&#xff1f;进程号 进程的环境变量应用程序中获取环境变量添加/删除/修改环境变量清空环境变量环境变量的作用 进程的内存布局进程的虚拟地址空间fork()创建子进程父、子进程间的文件共享系统调…

(笔记三)opencv图像基础操作

强调&#xff1a;本文只为学习记录做笔记 详细可参考opencv官网 &#xff1a;https://docs.opencv.org/4.1.1/d0/d86/tutorial_py_image_arithmetics.html &#xff08;1&#xff09;将cv2的BGR模式改为RGB模式 #!/usr/bin/env python # -*- coding:utf-8 -*- ""&q…

基于负载均衡的在线OJ实战项目

前言&#xff1a; 该篇讲述了实现基于负载均衡式的在线oj&#xff0c;即类似在线编程做题网站一样&#xff0c;文章尽可能详细讲述细节即实现&#xff0c;便于大家了解学习。 文章将采用单篇不分段形式&#xff08;ps&#xff1a;切着麻烦&#xff09;&#xff0c;附图文&#…