前端的请求拦截

最新推荐文章于 2025-05-21 09:39:56 发布

weixin_33888907

最新推荐文章于 2025-05-21 09:39:56 发布

阅读量9.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 python 后端 ViewUI

原文链接：https://juejin.im/post/5ce7c0876fb9a07ead59d5e3

博客提及状态码文件status.js，强调请求拦截时在headers上挂载token并存储到本地，还给出了转载来源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import axios from 'axios';
import {message} from 'antd'
import codeMessage from "./status.js"//自己封装
let token=sessionStorage.getItem('token')
// http request 拦截器
axios.interceptors.request.use(
    config => {
        if (token) {  // 判断是否存在token，如果存在的话，则每个http headers都加上token
            config.headers.authorization= `${token}`;//挂载token
            
        }else{
            message.error('请先登陆')
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    })
// http response 拦截器
axios.interceptors.response.use(
    response=>{
       if(response.status !== 200 ) return message.success('返回数据失败')
        return Promise.resolve(response);
    },error => {
        if (error.response) {
            message.error(codeMessage[error.response.status])
        }
        return Promise.reject(error)
    })
export default axios
复制代码

状态码（status.js）

const codeMessage = {
    200: '服务器成功返回请求的数据。',
    201: '新建或修改数据成功。',
    202: '一个请求已经进入后台排队（异步任务）。',
    204: '删除数据成功。',
    304: '已经执行了GET，但文件未变化',
    400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
    401: '用户没有权限（令牌、用户名、密码错误）。',
    402: '参数失败',
    403: '用户得到授权，但是访问是被禁止的。',
    404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
    406: '请求的格式不可得。',
    410: '请求的资源被永久删除，且不会再得到的。',
    422: '当创建一个对象时，发生一个验证错误。',
    500: '服务器发生错误，请检查服务器。',
    502: '网关错误。',
    503: '服务不可用，服务器暂时过载或维护。',
    504: '网关超时',
};
export default codeMessage
复制代码