axios封装(请求拦截及响应--本地存储管理)_axios 排除静态文件请求-CSDN博客

本文链接：https://blog.csdn.net/zhang_zbb/article/details/118120426

axios封装

1 文件结构

封装后的axios文件放在public静态资源中，
在这里插入图片描述

2 接口地址设置

在public文件夹中创建config.js文件，

var config = {
    'base_url': 'http://localhost:9528/'
}

在入口html文件中引入

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="./js/config.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

在main.js文件中引入axios.js文件，并全局挂载，之后在组件中就可以使用this.$axios进行数据请求

import Axios from "../public/js/ajax/axios"
Vue.prototype.$axios = Axios

3 源码

项目中在进行数据请求时一般需要携带token，而我们一般将token存储在浏览器的sessionstorage中，对其进行了封装，更加方便的对本地数据进行存储

/**
 *  处理本地缓存
 */

/**
 * 验证是否支持 sessionStorage
 */
function verifyLocal() {
    return window.sessionStorage && (window.sessionStorage.setItem('test', 'test'), window.sessionStorage.getItem('test') == 'test') ? true : false
}

/**
 * 获取cookie
 */
function getCookie(name) {
    let arr = document.cookie.split("; ") || [];
    let obj = {};
    arr.forEach(value => {
        let stepArr = value.split('=');
        obj[stepArr[0]] = stepArr[1]
    });
    /**
     * 传入要获取的cookie键时,返回对应的键值,不传时返回由cookie键值对组成的对象
     */
    if (name) {
        return obj[name]
    } else {
        return obj
    };
}

let localHandle = {
    // 设置本地存储
    set(key, value) {
        if (verifyLocal()) {
            window.sessionStorage.setItem(key, value);
        } else {
            let days = 1 / 24; //过期时间(天)
            let d = new Date();
            d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
            let expires = "expires=" + d.toGMTString();
            document.cookie = key + "=" + value + ";" + expires;
        }
    },
    // 获取本地存储
    get(key) {
        if (verifyLocal()) {
            return window.sessionStorage.getItem(key) ? window.sessionStorage.getItem(key) : null
        } else {
            return getCookie(key);
        }
    },
    clear(key) { //不传参数时清除所有本地数据
        if (verifyLocal()) {
            if (key) {
                window.sessionStorage.removeItem(key);
            } else {
                window.sessionStorage.clear();
            }
        } else {
            if (key) {
                document.cookie = key + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
            } else {
                Object.keys(getCookie()).forEach(value => {
                    document.cookie = value + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
                })
            }
        }
    }
}

export default {
    localHandle
}

axios封装源码


var routerLogin = '/login' //--登录页面路由 在登录状态过期是跳转到登录页面
var token = 'token'        //--本地存储中token键名,可修改
var overdue = -1           //--result.data.success   登录状态过期时的状态码  --与后端商定    
/**
 * axios 封装
 */

import qs from 'qs' // 引入qs模块, 用来序列化post类型的数据(可用可不用, 配合后台的数据 转换 格式)
import axios from axios
import {
    Message,
    Notification,
    MessageBox
} from 'element-ui'  //引入element-ui 彈窗提示(vue3.x中有所变化)
import {
    localHandle
} from "./cook"  //本地存储相关配置
import Router from 'vue-router';

let baseUrl = config.base_url;

// axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';

// 设置请求超时时间
axios.defaults.timeout = 10000;
// 设置公共请求地址
axios.defaults.baseURL = baseUrl;

// 拦截请求
axios.interceptors.request.use(config => {
    // 设置请求头
    config.headers['Authorization'] = "Bearer " + localHandle.get(token);
    return config
}, error => {
    Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(res => {
    // 未设置状态码则默认成功状态
    const code = res.data.success || 200;
    // 获取错误信息
    const msg = res.data.msg;  //提示信息字段可修改,根据后端数据而定
    if (code == overdue) {  //
        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            /**
             * 登录状态过期时,跳转到登录页面,路由根据实际情况而定
             */
            Router.push(routerLogin)
        }).catch(() => { });
    }
    else if (code == 200 || code == 304 || code == 1) {  //请求成功时的状态码 与后端商定
        return res
    } else {  //请求失败
        Message({
            message: msg,
            type: 'error'
        });
        return Promise.reject(new Error(msg))
    }
}, error => {
    let {
        message
    } = error;
    if (message == "Network Error") {
        message = "后端接口连接异常";
    } else if (message.includes("timeout")) {
        message = "系统接口请求超时";
    } else if (message.includes("Request failed with status code")) {
        message = "系统接口" + message.substr(message.length - 3) + "异常";
    }
    Message({
        message: message,
        type: 'error',
        duration: 5 * 1000
    })
    return Promise.reject(error)
});

// 封装请求方法
function requestMethod(type, url, data) {
    return new Promise((reslove, reject) => {
        axios({
            method: type,
            url: url,
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            },
            data: JSON.stringify(data)
        }).then(res => {
            reslove(res.data)
        }).catch(error => {
            reject(error.message)
        })
    })
}

axios.get = (url, data) => {
    return new Promise((resolve, reject) => {
        axios({
            url: url,
            method: 'get',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
            },
            params: data
        }).then(response => {
            resolve(response.data)
        }).catch((error) => {
            reject(error)
        })
    })
};
axios.post = (url, data) => {
    return requestMethod('post', url, data)
};
axios.put = (url, data) => {
    return requestMethod('put', url, data)
};
axios.patch = (url, data) => {
    return requestMethod('patch', url, data)
};
axios.delete = (url, data) => {
    return requestMethod('delete', url, data)
};

export default axios;