【全栈开发实战小草看书之Web端（五）Axios封装】

本文链接：https://blog.csdn.net/weixin_56024424/article/details/121970001

全栈开发实战小草看书之Web端（五）Axios封装

代码文件（http/index.js）

import axios from "axios";
import { ElMessage } from "element-plus";
import store from "@/store";

const http = axios.create({
  baseURL: import.meta.env.VITE_MGT_URL,
  timeout: 5000,
});
http.interceptors.request.use((config) => {
  config.headers.Authorization = store.state.user.token;

  return config;
});
http.interceptors.response.use(
  (response) => {
    if (response.data.code == 200) {
      return Promise.resolve(response.data.data);
    } else {
      ElMessage.error(response.data.msg);

      return Promise.reject(response.data);
    }
  },
  (error) => {
    ElMessage.error("服务器网络异常");

    return Promise.reject(error);
  }
);

export function useGet(url, params) {
  return http.get(url, params);
}

export function usePost(url, data) {
  return http.post(url, data);
}

export function useDelete(url, data) {
  return http.delete(url, data);
}

使用示例

import { useGet, usePost } from "@/http";

const user = await useGet("/mgt/sys/users/1")
await usePost("/mgt/sys/users", user);

上一章【全栈开发实战小草看书之Web端（四）Vuex状态管理】
下一章【全栈开发实战小草看书之Web端（六）Vue Router动态路由】