uniapp项目中使用第三方的包@escook/request-miniprogram来创建网络请求

最新推荐文章于 2024-05-14 14:47:11 发布

奋进的大美

最新推荐文章于 2024-05-14 14:47:11 发布

阅读量556

点赞数 1

文章标签： uni-app vue.js javascript

本文链接：https://blog.csdn.net/weixin_51382988/article/details/129760291

版权

1.安装

npm install @escook/request-miniprogram

2.在main.js中导入

import App from './App'
import Vue from 'vue'

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

// 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用
uni.$http = $http

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

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

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

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()

3.在页面中使用，以请求首页轮播图数据为例,项目pages/home/home.vue代码如下：

<template>
  <view>
    <!-- 轮播图代码区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item v-for="item,index in swiperList" :key="index">
        <view class="swiper-item">
          <image :src="item.image_src"></image>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        swiperList: []
      };
    },
    onLoad() {
      this.getSwiperList()
    },
    methods: {
      async getSwiperList(){
        const {data} = await uni.$http.get('/api/public/v1/home/swiperdata')
        if(data.meta.status !== 200){
          return uni.showToast({
            title: '数据请求失败',
            duration: 1500,
            icon:'none'
          })
        }
        this.swiperList = data.message
      }
    }
  }
</script>

<style lang="scss">
swiper{
  width:750rpx;
  .swiper-item,
  image{
    width:100%;
    height:100%;
  }
}
</style>