项目集成element-plus和axios

Posted 2021-08-30 忘忘碎斌bin

项目集成element-plus和axios

• • element-plus的集成
  • • 全局引入
    • 局部引入
    • `局部引用的封装`
  • axios的集成

注：在写对应的文件时，省略了其他库的与演示内容不相关的代码，为的是代码片段简洁点儿。

element-plus的集成

安装：npm install element-plus

全局引入

// 其余代码省略 .......
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
// 其余代码省略 .......
app.use(ElementPlus);

局部引入

在组件内部：引入需要的组件，引入对应的样式和基础样式，然后注册组件。一般基础样式在全局引入
main.ts中

import "element-plus/lib/theme-chalk/base.css";

组件内

<script lang="ts">
import { defineComponent } from "vue";
import { ElButton } from "element-plus";
import "element-plus/lib/theme-chalk/el-button.css";
export default defineComponent({
  name: "App"
  components: {
    ElButton
  }
});
</script>

局部引用的封装

新建src/global/index.ts文件，index.ts文件用于注册全局的一些第三方库

src/global/registerElement.ts用于注册需要用到的element组件

src/global/registerElement.ts

import { App } from "vue";

import { ElButton } from "element-plus";
import "element-plus/lib/theme-chalk/base.css";

const components = [ElButton];
export default function (app: App): void {
  for (const cpn of components) {
    app.component(cpn.name, cpn);
  }
}

引入不同的组件，还需要引入对应的样式，交给babel来完成

安装：npm install babel-plugin-import -D

babel.config.js配置：

module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: "element-plus",
        customStyleName: (name) => {
          return `element-plus/lib/theme-chalk/${name}.css`;
        }
      }
    ]
  ],
  presets: ["@vue/cli-plugin-babel/preset"]
};

src/global/index.ts

import { App } from "vue";

import registerElement from "./registerElement";

export default function (app: App): void {
  // 三种注册方式都可以
  // registerElement(app);
  // app.use({
  //	install: registerElement
  // })
  app.use(registerElement);
}

main.ts

import register from "./global";
// 其余代码省略 ......
app.use(register);

以后需要用到element的某个组件就到registerElement.ts内添加就可以了。

axios的集成

安装：npm install axios

使用类来封装axios

• 结合element-plus的Loading页面
• 三层拦截器根据需要自行引入
  type.ts文件

import { AxiosRequestConfig, AxiosResponse } from "axios";

export interface MsiInterceptors<T> {
  requestInterceptor?: (config: AxiosRequestConfig) => AxiosRequestConfig;
  requestInterceptorCatch?: (error: any) => any;
  responseInterceptor?: (result: T) => T;
  responseInterceptorCatch?: (error: any) => any;
}

export interface MsiRequestConfig<T = AxiosResponse>
  extends AxiosRequestConfig {
  interceptors?: MsiInterceptors<T>;
  isShowLoading?: boolean;
}

index.ts文件

import axios from "axios";
import type { AxiosInstance } from "axios";

import { ElLoading } from "element-plus";

import { MsiRequestConfig } from "./type";
import { ILoadingInstance } from "element-plus/lib/el-loading/src/loading.type";

const SHOW_LOADING = true;

class MsiRequest {
  instance: AxiosInstance;
  elLoading?: ILoadingInstance;
  isShowLoading: boolean = SHOW_LOADING;
  constructor(config: MsiRequestConfig) {
    this.instance = axios.create(config);
    this.isShowLoading = config.isShowLoading ?? SHOW_LOADING;
    // 实例拦截器
    this.instance.interceptors.request.use(
      config.interceptors?.requestInterceptor,
      config.interceptors?.requestInterceptorCatch
    );
    this.instance.interceptors.response.use(
      config.interceptors?.responseInterceptor,
      config.interceptors?.responseInterceptorCatch
    );
    // 全局拦截器
    this.instance.interceptors.request.use(
      (config) => {
        console.log("全局拦截器请求成功~");
        if (this.isShowLoading === true) {
          this.elLoading = ElLoading.service({
            text: "正在加载中，请稍后....",
            background: "rgba(0,0,0,.6)"
          });
        }

        return config;
      },
      (error) => {
        console.log("全局拦截器请求失败~");
        return error;
      }
    );
    this.instance.interceptors.response.use(
      (result) => {
        console.log("全局拦截器响应成功~");
        this.elLoading?.close();
        return result.data;
      },
      (error) => {
        console.log("全局拦截器响应失败~");
        return error;
      }
    );
  }

  request<T>(config: MsiRequestConfig<T>): Promise<T> {
    if (config.interceptors?.requestInterceptor) {
      this.isShowLoading = config.isShowLoading ?? SHOW_LOADING;
      config = config.interceptors.requestInterceptor(config);
    }

    return this.instance
      .request<any, T>(config)
      .then((res) => {
        if (config.interceptors?.responseInterceptor) {
          res = config.interceptors.responseInterceptor(res);
        }
        this.isShowLoading = SHOW_LOADING;
        return res;
      })
      .catch((err) => {
        this.isShowLoading = SHOW_LOADING;
        return err;
      });
  }
}

export default MsiRequest;