vue中axios请求的封装

最新推荐文章于 2024-07-20 21:05:24 发布

nysheng

最新推荐文章于 2024-07-20 21:05:24 发布

阅读量337

点赞数

分类专栏： Vue 文章标签： vue.js http typescript

本文链接：https://blog.csdn.net/qq_32867271/article/details/117527375

版权

本文详细介绍了在Vue.js项目中如何对axios进行封装，以优化HTTP请求，提高代码复用性和可维护性。通过创建一个axios实例，配置默认参数，结合typescript进行类型检查，使得请求更加规范且易于管理。

摘要由CSDN通过智能技术生成

import axios, {
    AxiosResponse } from "axios";
import {
    message } from "ant-design-vue";
import router from "../router";

// 自定义的后端接口
export interface IResponse extends AxiosResponse {
   
  code?: 0 | 1;
  data: any;
  message?: string;
  timestamp?: number;
}

// 通过环境变量拿到路由
// vite中使用import.meta.env.xxxx， webpack中使用process.env.xxxx
const baseURL = import.meta.env.VITE_ENV == "dev" ? "/api" : "http://localhost:3001";

// 定义基础 
const Axios = axios.create({
   
  baseURL: baseURL,
  timeout: 10000,
});

// 返回拦截器
Axios.interceptors.response.use(
  (response) => {
   
    if (response.data.code == 1) {
   
      return Promise.resolve(response.data);
    } else {
   
      message.