uniapp项目中配置网络请求

码上流星&洒下星辰

已于 2023-01-18 15:24:20 修改

阅读量910

点赞数 1

分类专栏： uni-app 文章标签： uni-app 前端 javascript

于 2023-01-18 15:15:54 首次发布

张砚博

本文链接：https://blog.csdn.net/qq_47272950/article/details/128726768

版权

uni-app 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

文章介绍了如何在uni-app中安装并配置@escook/request-miniprogram库进行http请求，包括设置请求根路径、请求前后处理函数。同时，展示了在模板中使用数据获取轮播图信息并展示的方法，当请求失败时会显示错误提示。

摘要由CSDN通过智能技术生成

//终端中安装
npm install @escook/request-miniprogram

在main.js中配置如下
import { $http } from '@escook/request-miniprogram'

uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}
// 封装的展示消息提示的方法
uni.$showMsg = function (title = '数据加载失败！', duration = 1500) {
  uni.showToast({
    title,
    duration,
    icon: 'none',
  })
}
// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}

配置完成后使用

<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">
         <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
           <!-- 动态绑定图片的 src 属性 -->
           <image :src="item.image_src"></image>
         </navigator>
     </swiper-item>
    </swiper>
  </view>
</template>
 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.$showMsg()
       // 3.3 请求成功，为 data 中的数据赋值
       this.swiperList = res.message
     },
   },
 }