前端通用Axios 请求拦截配置

前端通用Axios 请求拦截配置

配置

目录在request或者plugins都可以,看自己习惯

文件名ReqAxios.js/ReqAxios.ts

ts 复制代码
import axios from "axios";
//消息提示
import { message } from "ant-design-vue";
import Vue from 'vue'

const reqAxios = axios.create({
  baseURL: "http://localhost:8101/api",
  timeout: 10000,
  headers: {},
});

// 请求拦截
reqAxios.interceptors.request.use(
  (config) => {
    // let token = localStorage.getItem("token") || "";
    // config.headers["Authorization"] = token;
    return config;
  },
  (err) => {
    Promise.reject(err);
  }
);

// 添加响应拦截器
reqAxios.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    const data = response.data;
    //和后端规定的正确响应码
    if (data.code === 0) {
      return data.data;
    } else {
      //错误情况,消息提示
      //vue使用
      message.error(data.message);
      //ant design vue使用
      Vue.prototype.$message.error(message);
    }
    return data;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          error.message = "请求错误(400)";
          break;
        case 401:
          error.message = "未授权,请重新登录(401)";
          break;
        case 403:
          error.message = "拒绝访问(403)";
          break;
        case 404:
          error.message = "请求出错(404)";
          break;
        case 408:
          error.message = "请求超时(408)";
          break;
        case 4003:
          error.message = "token失效,请重新登录";
          localStorage.removeItem("token");
          location.reload();
          break;
        case 500:
          error.message = "服务器错误(500)";
          break;
        case 501:
          error.message = "服务未实现(501)";
          break;
        case 502:
          error.message = "网络错误(502)";
          break;
        case 503:
          error.message = "服务不可用(503)";
          break;
        case 504:
          error.message = "网络超时(504)";
          break;
        case 505:
          error.message = "HTTP版本不受支持(505)";
          break;
        default:
          error.message = "连接出错" + error.response.status;
      }
    } else {
      error.message = "连接服务器失败!";
    }
    return Promise.reject(error);
  }
);
/**
 * 使用es6的export default导出了一个函数,导出的函数代替axios去帮我们请求数据,
 * 函数的参数及返回值如下:
 * @param {String} method  请求的方法:get、post、delete、put
 * @param {String} url     请求的url:
 * @param {Object} data    请求的参数
 * @returns {Promise}     返回一个promise对象,其实就相当于axios请求数据的返回值
 */
export default function (method: string, url: string, data: any) {
  method = method.toLowerCase();
  if (method == "post") {
    return reqAxios.post(url, data);
  } else if (method == "get") {
    return reqAxios.get(url, { params: data });
  } else {
    console.error("未知的method" + method);
    return false;
  }
}

封装请求

所有请求都封装在单独的文件,便于维护

javascript 复制代码
//@根目录表示src目录
import ReqAxios from "@/request/ReqAxios";

/**
 * 分页获取列表(封装类)
 * @param params
 */
export const listPostVOByPage = (params: any) =>
  ReqAxios("post", "请求地址", params);

在具体组件中使用

js 复制代码
searchAll(searchParams.value)
    .then((data) => {
      xxx
    })
    .catch((error) => {
      console.error(error);
      //vue使用
      message.error(error);
      //ant design vue使用
      Vue.prototype.$message.error(error);
    });
相关推荐
掘金安东尼6 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~9 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务11 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛11 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑15 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭21 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿26 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨35 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭42 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js