Axios

官方文档

安装 axios

yarn add axios

使用 axios

封装统一处理

在 src/api 文件夹下创建 request.js，内容如下：

import axios from "axios";
import store from "@/store";
import notification from "ant-design-vue/es/notification";

// 创建 axios 实例
const request = axios.create({
  // API 请求的默认前缀
  baseURL: process.env.VUE_APP_API_BASE_URL,
  // 请求超时时间
  timeout: 6000,
});

// 异常拦截处理器
const errorHandler = (error) => {
  if (error.response) {
    const data = error.response.data;
    // 从 localstorage 获取 token
    const token = localStorage.getItem("ACCESS_TOKEN");
    if (error.response.status === 403) {
      notification.error({
        message: "Forbidden",
        description: data.message,
      });
    }
    if (
      error.response.status === 401 &&
      !(data.result && data.result.isLogin)
    ) {
      notification.error({
        message: "Unauthorized",
        description: "Authorization verification failed",
      });
      if (token) {
        store.dispatch("Logout").then(() => {
          setTimeout(() => {
            window.location.reload();
          }, 1500);
        });
      }
    }
  }
  return Promise.reject(error);
};

// request interceptor
request.interceptors.request.use((config) => {
  const token = localStorage.getItem("ACCESS_TOKEN");
  // 如果 token 存在
  // 让每个请求携带自定义 token 请根据实际情况自行修改
  if (token) {
    config.headers["ACCESS_TOKEN"] = token;
  }
  return config;
}, errorHandler);

// response interceptor
request.interceptors.response.use((response) => {
  console.log(response.config.url, response.data);
  return response.data;
}, errorHandler);

export default request;

api 文件引入

创建 api.js 文件，引入并使用 request.js 文件，内容如下：

import request from "./request";

const userApi = {
  // 获取工作台数据
  GetWorkbenchData: "/api/workbench/getData",
};

export function getWorkbenchData(parameter) {
  return request({
    url: userApi.GetWorkbenchData,
    method: "get",
    data: parameter,
  });
}

使用 api

<script>
  import { getWorkbenchData } from "@/api/common";

  export default {
    data() {
      return {
        data: {},
      };
    },
    created() {
      getWorkbenchData({}).then((res) => {
        if (res.code === 200) {
          this.data = res.data;
        }
      });
    },
  };
</script>