axios在前后端分离项目中的应用

最新推荐文章于 2025-03-17 10:44:38 发布

原创最新推荐文章于 2025-03-17 10:44:38 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在React项目中使用Axios进行网络请求的封装方法，详细展示了如何处理不同HTTP状态码，并提供了一个实用的请求工具类，旨在简化前端开发人员的API调用流程。

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

现在项目大多数采用前后端分离的方式来实现，特别是随着React、Vue的流行使用越来越广泛。第一次接触React时选用了蚂蚁金服dva+antd来搭建前端开发框架，dva自带的fetch方法不能满足项目需求，所以自己采用axios封装了一个访问网络数据工具类。

等后续有时间会补上react + dva.js + axios +antd 搭建的前端开发框架的代码，现只贴出axios请求工具类request.js。

/* global window */
import axios from 'axios';
//let apiRoot = document.cookie.apiroot ? document.cookie.apiroot : "";
//let ssosessionid = document.cookie.ssosessionid;


axios.interceptors.response.use(response => {

    //axios请求拿到结果会根据情况加入对应的状态码，成功了会加：statusCode=200，success: true
    //console.log('axios请求response.data: ', response.data);

    var returnMessage;
    if(response.data.code ==  401) {
        returnMessage = '未授权，请重新登录(401)';
        console.error(returnMessage);
        alert(returnMessage);
        window.location.href = '/login';
        return Promise.reject(response);

    } else if(response.data.code ==  403) {
        returnMessage = '无权限，拒绝访问(403)';
        console.error(returnMessage);
        alert(returnMessage);
        return Promise.reject(response);

    }else if(response.data.resultFlag ==  'SUCCESS' || response.data.statusCode == 200 ) {
        // returnMessage = 'axios请求成功！'
        // console.log(returnMessage);
        return response;
    }
    return response;
}, err => {

    console.log('axios请求error:  ', err);

    if (err && err.response) {
        switch (err.response.status) {
            case 400: err.message = '请求错误(400)' ; break;
            case 401: err.message = '未授权，请重新登录(401)'; break;
            case 403: err.message = '无权限，拒绝访问(403)'; break;
            case 404: err.message = '请求出错(404)'; break;
            case 408: err.message = '请求超时(408)'; break;
            case 500: err.message = '服务器错误(500)'; break;
            case 501: err.message = '服务未实现(501)'; break;
            case 502: err.message = '网络错误(502)'; break;
            case 503: err.message = '服务不可用(503)'; break;
            case 504: err.message = '网络超时(504)'; break;
            case 505: err.message = 'HTTP版本不受支持(505)'; break;
            default: err.message = `连接出错(${err.response.status})!`;
        }
    }else{
        err.message = '连接服务器失败!'
    }
    message.error(err.message);
    return Promise.reject(err);
});

export default axios;


const fetch = (options) => {
    let {
        method = 'post',
        data,
        url,
        config,
    } = options;

    switch (method.toLowerCase()) {
        case 'get':
            return axios.get(url, {
                params: data,
            });
        case 'delete':
            return axios.delete(url, {
                data,
            });
        case 'post':
            return axios.post(url, data, config);
        case 'put':
            return axios.put(url, data, config);
        case 'patch':
            return axios.patch(url, data, config);
        default:
            return axios(options);
    }
}



export function request(options) {

    if (options && options.url) {
        options.url += "?ssoSessionId=a8280fac-b7fe-43c7-9149-78701b2c0cb0++"; //只在react请求生效，node环境该累加的ssoSessionId不会生效，会被覆盖掉
    }
    //console.info("---------->> request options :", options);

    return fetch(options).then((response) => {
        const {statusText, status} = response;
        let {data} = response;
        if (data instanceof Array) {
            data = {
                list: data,
            };
        }
        if (data instanceof Blob) {
            data = {
                obj: data,
            };
        }
        return Promise.resolve({
            success: true,
            message: statusText,
            statusCode: status,
            ...data,
        });
    }).catch((error) => {
        //axios返回错误信息位于：error.response.data
        const {response} = error;

        if (response && response.data && response.data.errorMessage) {
            console.log('---equest Error.response--> ', error.response);
            const errorMsg = response.data.errorMessage;
            if (errorMsg.indexOf("未登录") > -1 ){
               alert("请求被拒绝，该请求必须登录状态才能发起！");
            } else if (errorMsg.indexOf("没有足够的权限") > -1){
                alert("请求被拒绝，没有足够的权限！");
            }
        }

        let msg;
        let statusCode;
        if (response && response instanceof Object) {
            const {data, statusText} = response;
            statusCode = response.status;
            msg = data.message || statusText;
        } else {
            statusCode = 600;
            msg = error.message || 'Network Error';
        }

        /* eslint-disable */
        return Promise.reject({success: false, statusCode, message: msg})
    })
}

export const doRequest = (url, method = "post", params, callbackSuccess, callbackFail) => {
    return request({
        url: url,
        method: method,
        data: params,
    }).then(function (result) {
        if (callbackSuccess) {
            callbackSuccess(result);
        }
    }, function (error) {
        if (callbackFail) {
            callbackFail(error);
        }
    });
}

使用起来特别方便，新建一个文件名为service.js，在js文件中直接引入即可。

import { request } from 'utils/request';

export async function query(params) {
    var reqBody = {
        url: "/xxxx",
        method: 'post',
        config:{headers: {'Content-Type': 'application/x-www-form-urlencoded'}},
        data: {
             ...params
        }
    };
    console.log("xxxxxjsonxxxxxxx", JSON.stringify(reqBody));
    return request(reqBody);
}

上图代码中config可以通过向 axios 传递相关配置来创建请求

axios参考链接：http://www.axios-js.com/zh-cn/docs/