vue/uni-app引入全局封装的网络请求

Z时代
2024-01-10
分类：综合

vue

1、request.js文件

/*request.js*/
/* 封装的网络请求 */
export const request = params => {
  const baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1"
  return new Promise((resolve, reject) => {
    uni.request({
      ...params,
      url: baseUrl + params.url,
      success: res => {
        if (res.statusCode !== 200) {
          uni.showToast({
            title: \'获取数据失败\',
            duration: 800
          });
        } else {
          resolve(res)
        }
      },
      fail: err => {
        uni.showToast({
          title: "网络请求失败",
          duration: 800
        })
        reject(err)
      }
    })
  })
}

2、http.js文件

/*http.js*/
/* 使用网络请求 */
import {request} from "./request.js"
/* 首页轮播图数据 */
export function getSwiperList(){
  return request({
    url:"/home/swiperdata"
  })
}

/*main.js*/
import Vue from \'vue\'
import App from \'./App\'
import {getSwiperList} from "network/http.js"//引入网络请求
Vue.prototype.$getSwiperList=getSwiperList //设置原型
Vue.config.productionTip = false
App.mpType = \'app\'
const app = new Vue({
    ...App
})
app.$mount()

3、index.vue文件

/*index.vue*/
<template>
  <view class="index"></view>
</template>
<script>
/* 引入网络请求模块*/
// import { getSwiperList } from \'../../network/http.js\';
export default {
  name: \'index\',
  data() {
    return {
      swiperList: [] //轮播图数据
    };
  },
  computed: {},
  components: {},
  created() {
    this.getSwiperList();
  },
  mounted() {},
  methods: {
    /* 获取轮播图数据*/
    async getSwiperList() {
      // const res = await getSwiperList();
      const res=await this.$getSwiperList();//使用网络请求
      console.log(res)     
    }
  }
};
</script>
<style lang="scss" scoped></style>