vue cli3 使用axios和elementui 实现 全局请求的loading

原文链接: vue cli3 使用axios和elementui 实现 全局请求的loading

上一篇: uml 用例图

下一篇: idea 创建 kotlin hello 项目

实现全局请求的loading

项目结构

http.js

封装axios, 设置全局拦截器,使用全局变量, 显示和关闭loading

import axios from "axios";
import { Loading, Message } from "element-ui";

// 全局变量 保存 loading实例
let loading;

function startLoading() {
  console.log("startLoading");
  loading = Loading.service({
    lock: true,
    text: "加载中...",
    background: "deepgray"
  });
}

function endLoading() {
  console.log("endLoading");
  loading.close();
}

// 请求拦截
axios.interceptors.request.use(
  config => {
    startLoading();
    return config;
  },
  error => Promise.reject(error)
);

// 响应拦截
axios.interceptors.response.use(
  response => {
    endLoading();
    return response;
  },
  error => {
    endLoading();
    Message.error("加载错误");
    return Promise.reject(error);
  }
);
export default axios;

vue.config.js

配置cros代理, 将以/ahao开始的请求使用代理访问,实现 前端跨域

module.exports = {
  devServer: {
    // host: "localhost",
    host: "0.0.0.0",
    // port: 8080,
    https: false,
    hotOnly: false,
    proxy: {
      "/ahao": {
        target: "http://www.ahaoboy.cn:7777/",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/ahao": ""
        }
      }
    }
  }
};

App.vue

使用http导出的axios, 访问资源, 此时会出现loading和出错信息

<template>
  <div id="app">
    <button @click="suc">suc</button>
    <button @click="err">err</button>
  </div>
</template>

<script>
import http from "./http";
export default {
  name: "app",
  methods: {
    async suc() {
      let res = await http.get("/ahao/show_all_card");
      console.log(res);
    },
    err() {
      http.get("/ahao/aaaa");
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>