【uniapp】配置网络请求

简介: 【uniapp】配置网络请求

1.简介

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

官方文档:@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.请求结果状态(success)2.数据(data)3.提示(message)

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
    }
}
目录
相关文章
|
7月前
|
机器学习/深度学习 移动开发 测试技术
RT-DETR改进策略【模型轻量化】| 替换骨干网络为MoblieNetV2,含模型详解和完整配置步骤
RT-DETR改进策略【模型轻量化】| 替换骨干网络为MoblieNetV2,含模型详解和完整配置步骤
251 1
RT-DETR改进策略【模型轻量化】| 替换骨干网络为MoblieNetV2,含模型详解和完整配置步骤
|
7月前
|
机器学习/深度学习 计算机视觉
RT-DETR改进策略【Backbone/主干网络】| 替换骨干网络为2023-CVPR LSKNet (附网络详解和完整配置步骤)
RT-DETR改进策略【Backbone/主干网络】| 替换骨干网络为2023-CVPR LSKNet (附网络详解和完整配置步骤)
200 13
RT-DETR改进策略【Backbone/主干网络】| 替换骨干网络为2023-CVPR LSKNet (附网络详解和完整配置步骤)
|
6月前
|
域名解析 网络协议 Linux
网络基础知识与配置
本文介绍了网络基础知识,涵盖网络概念、协议、拓扑结构及IP地址等内容。网络是由计算机设备通过通信线路连接而成的系统,用于资源共享与信息传递。文中详细解析了TCP/IP协议族(如IP、TCP、UDP)、常见应用层协议(如HTTP、FTP、SMTP、DNS)的功能与应用场景。同时,阐述了多种网络拓扑结构(总线型、星型、环型、树型、网状)的特点与优缺点。此外,还讲解了IP地址分类、子网掩码的作用,以及如何在Windows和Linux系统中配置网络接口、测试连通性(Ping、Traceroute)和查看默认网关与路由表的方法。这些内容为理解和管理计算机网络提供了全面的基础知识。
527 6
|
7月前
|
机器学习/深度学习 编解码 数据可视化
RT-DETR改进策略【Backbone/主干网络】| 替换骨干网络为2023-CVPR ConvNeXt V2 (附网络详解和完整配置步骤)
RT-DETR改进策略【Backbone/主干网络】| 替换骨干网络为2023-CVPR ConvNeXt V2 (附网络详解和完整配置步骤)
456 11
RT-DETR改进策略【Backbone/主干网络】| 替换骨干网络为2023-CVPR ConvNeXt V2 (附网络详解和完整配置步骤)
|
7月前
|
机器学习/深度学习 移动开发 测试技术
YOLOv11改进策略【模型轻量化】| 替换骨干网络为MoblieNetV2,含模型详解和完整配置步骤
YOLOv11改进策略【模型轻量化】| 替换骨干网络为MoblieNetV2,含模型详解和完整配置步骤
378 13
YOLOv11改进策略【模型轻量化】| 替换骨干网络为MoblieNetV2,含模型详解和完整配置步骤
|
6月前
|
安全 网络协议 网络安全
当虚拟机出现网络连接问题时,应该先检查Hyper-V的网卡连接配置
当虚拟机出现网络连接问题时,应首先检查Hyper-V的网卡配置。具体步骤包括:确认虚拟机运行状态、检查虚拟交换机类型和物理网卡连接、确保虚拟机网络适配器正确连接到虚拟交换机,并验证网络配置(IP地址等)。常见问题如虚拟交换机配置错误、网络适配器未连接或防火墙阻止连接,可通过重新配置或调整设置解决。必要时重启虚拟机和宿主机,查看事件日志或联系技术支持以进一步排查问题。
|
6月前
|
监控 安全 网络协议
Hyper V上网实战:多虚拟机网络环境配置
在Hyper-V环境中配置多虚拟机网络以实现上网功能,需完成以下步骤:1. 确认Hyper-V安装与物理网络连接正常;2. 配置虚拟交换机(外部、内部或专用)以支持不同网络需求;3. 设置虚拟机网络适配器并关联对应虚拟交换机;4. 验证虚拟机网络连接状态;5. 根据场景需求优化多虚拟机网络环境。此外,还需注意网络隔离、性能监控及数据备份等事项,确保网络安全稳定运行。
|
6月前
|
虚拟化 网络虚拟化 Windows
导入虚拟机到Hyper-V环境时,理解并配置网络适配器设置是确保网络通信的关键
在Hyper-V环境中,正确配置虚拟机的网络适配器是确保其网络通信的关键。需先启用Hyper-V功能并创建虚拟交换机。接着,在Hyper-V管理器中选择目标虚拟机,添加或配置网络适配器,选择合适的虚拟交换机(外部、内部或私有),并根据需求配置VLAN、MAC地址等选项。最后,启动虚拟机并验证网络连接,确保其能正常访问外部网络、与主机及其他虚拟机通信。常见问题包括无法访问外部网络或获取IP地址,需检查虚拟交换机和适配器设置。
|
8月前
|
安全 网络协议 网络安全
【Azure APIM】APIM服务配置网络之后出现3443端口不通,Management Endpoint不健康状态
如果没有关联的网络安全组,则阻止所有网络流量通过子网和网络接口。
160 30
|
7月前
|
安全 数据挖掘 BI

热门文章

最新文章