axios的二次封装

简单封装axios的二次封装,:
(1)、设置了axios的请求超时时间以及超时提示。
(2)、配置了请求拦截器:
a、设置请求自动携带token。
b、自动拼接请求URL。
c、根据不同的请求设置Content-Type。
(3)、配置响应拦截器:
a、细化响应状态,并给出响应的提示。
(4)、外部调用:

import remoteServe from '@/utils/axiosUtils';
const invoceRemoteServe = async (_url: string, _params: any) => {
  return await remoteServe.post<Data>(_url, _params)
};

const getHomeBookList: any = async () => {
  return invoceRemoteServe('/test/api/getHomeBookList', {}, "");
}
import axios from 'axios'
import { ElMessage } from 'element-plus'
import HttpCode from '../constant/HttpCodeConstant'
import router from "../router/index";

// 设置axios在请求的时候携带所有的cookies
axios.defaults.withCredentials = true;

const baseConfigURL = "http://127.0.0.1:8000";
// 创建axios实例对象
const remoteServe = axios.create({
    baseURL: baseConfigURL,
    timeout: 1000, // 超时时间
    timeoutErrorMessage: "请求超时,请联系管理员检查服务情况!"
});

// 设置axios请求头
remoteServe.defaults.headers.post['Content-Type'] = "application/json; charset=UTF-8";

// 响应拦截器
remoteServe.interceptors.response.use(success => {
    // 请求成功
    if (success.status == HttpCode.HTTP_CODE_200) {
        ElMessage.success("请求成功!");
        return success.data;
    } else if (success.status == HttpCode.HTTP_CODE_401) { // 未认证
        ElMessage.warning("请求失败,请重新登录后再试!");
        router.replace("/");
        return;
    } else {
        ElMessage.warning("请求失败,请检查!");
        return;
    }

}, error => {
    ElMessage.error("请求失败,服务器维护中,请稍后再试!");
    return Promise.reject(error)
});

// 请求拦截器
remoteServe.interceptors.request.use(config => {
    config.url = baseConfigURL + config.url;
    const token = localStorage.getItem("token");
    token && (config.headers.Authorization = token);
    
    return config;
});

export default remoteServe;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜间沐水人

文章编写不易,一分钱也是爱。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值