15，axios的二次封装

最新推荐文章于 2023-05-31 20:23:21 发布

Justion_

最新推荐文章于 2023-05-31 20:23:21 发布

阅读量250

点赞数

分类专栏： VUE学习文章标签：前端

本文链接：https://blog.csdn.net/m0_62598303/article/details/123025067

版权

VUE学习专栏收录该内容

35 篇文章 1 订阅

订阅专栏

这个博客展示了如何在Vue项目中结合axios和Mint-UI的Indicator组件来处理数据加载。作者在Home页面引入了Indicator进行加载提示，并通过axios从API获取数据，然后使用`$nextTick`确保DOM更新后再初始化Better-Scroll滚动插件。同时，创建了一个名为request.js的文件，用于统一处理HTTP请求，包括显示和隐藏加载指示器。

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

home页面引入

import { Indicator } from "mint-ui";

methods: {
    async getData() {
      Indicator.open("加载中...");
      let res = await axios({
        url: "/api/index_list/0/data/1",
      });
      this.items = Object.freeze(res.data.data.topBar);
      this.newData = Object.freeze(res.data.data.data);
      console.log(res.data.data.data);

      Indicator.close();
      // 当dom都加载完毕了再去执行
      this.$nextTick(() => {
        this.oBetterScroll = new BetterScorll(this.$refs.wrapper, {
          movable: true,
          zoom: true,
        });
      });
    },

src下新建common 新建api 新建 request.js

import { Indicator } from "mint-ui";
import axios from "axios";

export default {
  common: {
    method: "GET",
    data: {},
    params: {},
  },

  $axios(options = {}) {
    options.method = options.method || this.common.method;
    options.data = options.data || this.common.data;
    options.params = options.params || this.common.params;

    //    请求前  ==》显示加载、、、
    Indicator.open("加载中...");

    return axios(options).then((v) => {
      let data = v.data.data;
      return new Promise((res, req) => {
        if (!v) return req();
        //结束==》  关闭中
        setTimeout(() => {
          Indicator.close();
        }, 500);
        res(data);
      });
    });
  },
};

Home页面改成：

<template>
  <div class="home">
    <div class="headers">
      <div class="headers-main">
        <Header />
        <ly-tab
          v-model="selectedId"
          :items="items"
          :options="options"
          @change="changeTab"
        >
        </ly-tab>
      </div>
    </div>
    <section ref="wrapper">
      <div>
        <div v-for="(item, index) in newData" :key="index">
          <Swiper v-if="item.type == 'swiperList'" :swiperList="item.data" />
          <Icons v-if="item.type == 'iconsList'" :iconsList="item.data" />
          <Recommend
            v-if="item.type == 'RecommendList'"
            :RecommendList="item.data"
          />

          <Ad v-if="item.type == 'adList'" :adList="item.data"></Ad>
          <Like v-if="item.type == 'LikeList'" :LikeList="item.data" />
        </div>
      </div>
    </section>
    <Tabbar />
  </div>
</template>

<script>
import Tabbar from "@/components/common/Tabbar.vue";
import Header from "@/components/home/Header.vue";
import Swiper from "@/components/home/Swiper";
import Icons from "@/components/home/Icons";
//引入better-scroll
import BetterScorll from "better-scroll";
import Recommend from "@/components/home/Recommend";
import Like from "@/components/home/Like";
import Ad from "@/components/home/Ad";
import http from "@/common/api/request.js";
// import axios from "axios";
//引入indicator
// import { Indicator } from "mint-ui";

export default {
  components: {
    Tabbar,
    Header,
    Swiper,
    Icons,
    Recommend,
    Like,
    Ad,
  },
  name: "Home",
  mounted() {
    // console.log(this.$data, this.$el);
  },

  data() {
    return {
      selectedId: 0,
      newData: [],
      items: [],
      oBetterScroll: "",
      tBetterScroll: "",
      options: {
        activeColor: "#4ac23f",
        // 可在这里指定labelKey为你数据里文字对应的字段
      },
    };
  },
  methods: {
    async getData() {
      // Indicator.open("加载中...");
      // let res = await axios({
      //   url: "/api/index_list/0/data/1",
      // });
      let res = await http.$axios({
        url: "/api/index_list/0/data/1",
      });

      this.items = Object.freeze(res.topBar);
      this.newData = Object.freeze(res.data);

      // this.items = Object.freeze(res.data.data.topBar);
      // this.newData = Object.freeze(res.data.data.data);
      // console.log(res.data.data.data);

      // Indicator.close();
      // 当dom都加载完毕了再去执行
      this.$nextTick(() => {
        this.oBetterScroll = new BetterScorll(this.$refs.wrapper, {
          movable: true,
          zoom: true,
        });
      });
    },
    async addData(index) {
      // console.log(index);

      // let res = await axios({
      //   url: "api/index_list/" + index + "/data/1",
      // });

      let res = await http.$axios({
        url: "api/index_list/" + index + "/data/1",
      });

      if (res.constructor != Array) {
        this.newData = res.data;
      } else {
        this.newData = res;
      }

      // if (res.data.data.constructor != Array) {
      //   this.newData = res.data.data.data;
      // } else {
      //   this.newData = res.data.data;
      // }

      //当dom都加载完毕了再去执行
      this.$nextTick(() => {
        this.tBetterScroll = new BetterScorll(this.$refs.wrapper, {
          movable: true,
          zoom: true,
        });
      });
    },

    changeTab(item, index) {
      // console.log(index);
      this.addData(index);
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.headers {
  width: 100%;
  height: 0.3rem;
}
.headers-main {
  position: fixed;
  top: 0;
  left: 0;
}
section {
  flex: 1;
  margin-top: 2.5rem;
  overflow: hidden;
}
::v-deep .ly-tab {
  box-shadow: none;
  border-bottom: none;
}
</style>