axios拦截器以及全局设置loading

涉及到一下点：

1. vuex状态机
2. axios拦截器
3. antd的Spin组件

请求拦截器

在请求发送前进行拦截，按需求进行设置操作，比如请求需要携带token。在请求拦截器中统一设置。

axios.interceptors.request.use(
  config => {
    // 获取到请求参数，按需设置
    const token = sessionStorage.getItem("token");
    if (token) {
      Object.assign(config.headers, {
        Token: token
      });
    } else {
      sessionStorage.removeItem("token");
      window.location.href = "/login";
    }
    // 设置loading
    store.commit("loading");
    return config;
  },
  error => {
    // 失败后取消loading
    store.commit("loading");
    return Promise.reject(error);
  }
);

响应拦截器

接收到响应后进行根据需求处理响应数据，token失效，重新跳转登陆。

axios.interceptors.response.use(
  response => {
    store.commit("loading");
    if (response.data.code === 502) {
      //登录失效
      sessionStorage.removeItem("token");
      window.location.href = "/login";
      return;
    }
    return response;
  },
  error => {
    store.commit("loading");
    return Promise.reject(error);
  }
);

全部代码

封装的axios工具类：

/**
 * 1. 设置axios相关参数
 * 2. 设置请求拦截以及响应
 * 3. 封装get/post方法
 */
import Qs from "qs";
import axios from "axios";
import store from "@/store/index";

const requestTime = 10; //请求响应时间，默认为10s
Object.assign(axios.defaults, {
  timeout: 1000 * requestTime,
  withCredentials: true,
  headers: {
    "Content-Type": "application/json"
  }
});

// 请求拦截
axios.interceptors.request.use(
  config => {
    // 获取到请求参数，按需设置
    const token = sessionStorage.getItem("token");
    if (token) {
      Object.assign(config.headers, {
        Token: token
      });
    } else {
      sessionStorage.removeItem("token");
      window.location.href = "/login";
    }
    // 设置loading
    store.commit("loading");
    return config;
  },
  error => {
    // 失败后取消loading
    store.commit("loading");
    return Promise.reject(error);
  }
);
// 请求响应
axios.interceptors.response.use(
  response => {
    store.commit("loading");
    if (response.data.code === 502) {
      //登录失效
      sessionStorage.removeItem("token");
      window.location.href = "/login";
      return;
    }
    return response;
  },
  error => {
    store.commit("loading");
    return Promise.reject(error);
  }
);
export default {
  get(url: string, params = {}) {
    return new Promise((resolve, reject) => {
      axios
        .get(url, params)
        .then(res => {
          resolve(res.data);
        })
        .catch(error => {
          reject(error);
        });
    });
  },
  post(url: string, params = {}) {
    console.log();
    return new Promise((resolve, reject) => {
      axios
        .post(url, Qs.stringify(params))
        .then(res => {
          resolve(res.data);
        })
        .catch(error => {
          reject(error);
        });
    });
  }
};

页面代码：

<template>
  <div>
    <!-- 使用loading，通过状态机控制 -->
    <a-spin tip="Loading..." :spinning="$store.state.isLoading">
      <a-table
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          columnWidth: 100
        }"
        :columns="columns"
        :data-source="userList"
        rowKey="key"
      >
        <a slot="name" slot-scope="text">{{ text }}</a>
      </a-table>
    </a-spin>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { getUserList } from "@/api/user/user";
@Component({})
export default class NAME extends Vue {
  // component
  private columns = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
      scopedSlots: { customRender: "name" },
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
      scopedSlots: { customRender: "age" },
    },
    {
      title: "住址",
      dataIndex: "address",
      key: "address",
      scopedSlots: { customRender: "address" },
    },
    {
      title: "IP",
      dataIndex: "ip",
      key: "ip",
      scopedSlots: { customRender: "ip" },
    },
    {
      title: "最后上线时间",
      dataIndex: "date",
      key: "date",
      scopedSlots: { customRender: "date" },
    },
  ];
  private userList = [];
  selectedRowKeys = [];
  created() {
    getUserList()
      .then((res: unknown) => {
        console.log(res);
        this.userList = (res as any).tableData;
      })
      .catch((err) => {
        console.error(err);
      });
  }
  onSelectChange(selectedRowKeys: never[]) {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.selectedRowKeys = selectedRowKeys;
  }
}
</script>
<style>
@import url("");
</style>