前端通用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);
    });
相关推荐
sunbyte几秒前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常2 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常4 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc10188 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28115 分钟前
Chrome插件开发
前端
前端 贾公子27 分钟前
Monorepo + vite 怎么热更新
前端
coding随想36 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#