首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >vue里自定义封装axios

vue里自定义封装axios

作者头像
青梅煮码
发布2023-03-13 16:05:50
发布2023-03-13 16:05:50
3190
举报
文章被收录于专栏:青梅煮码青梅煮码

前言

今天研究了一下公司pc端封装的axios,主要配合element以及js-cookie,自己跟着搞了一遍,在这里记录一下。

代码

代码语言:javascript
复制
import axios from 'axios';
import { Loading } from 'element-ui';
import Cookies from 'js-cokie';

//基于axios基本配置创建实例
const serviece=axios.ceeate({
    baseUrl: '',
    timeOut: 10000,
    headers: {
        source: 'YTO-STEWARD'
    }
});

let loadingInstance;

// 创建http请求拦截器
serviece.interceptors.request.use(
    config => {
        config.headers['Content-Type'] = 'application/json';
        loadingInstance=Loading.serviece({
            lock: true,
            text: '加载中,请稍后...',
            background: 'rgba(255,255,255,0.7)'
        });
        let token = Cookies.get('jwt-token');
        if (token) {
            config.headers['jwt-token'] = token;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    }
);

// 创建http返回拦截器
serviece.interceptors.response.use(
    response => {
        loadingInstance && loadingInstance.close();
        return response.data;
    },
    err => {
        let { headers,config } =err.response;
        if (headers['jwt-token']) {
            Cookies.set('jwt-token', headers['jwt-token'], {
                expires: 1 /24
            });
            Cookies.set('token-expires', Date.now(), {
                expires: 1 /24
            })
        };
        loadingInstance && loadingInstance.close();
        return Promise.reject(err);
    }
);

export default serviece;
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-05-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
    • 代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档