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

本文介绍了一种在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/

### 使用 Axios 进行前后端分离项目的 API 请求和数据交互 在现代 Web 开发中,Axios 是一种流行的 HTTP 客户端库,用于执行 AJAX 调用。相比于传统的原生 Ajax 方法,Axios 提供了一个更简洁的 API 接口来处理前端与后端之间的异步通信[^1]。 #### 创建 Axios 实例并配置默认设置 为了更好地管理和定制请求行为,在应用启动时可以创建一个全局 Axios 实例,并为其设定一些通用选项: ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com/', // 设置基础 URL timeout: 5000, // 设定超时时长 }); ``` #### 发送 GET 请求获取资源列表 当需要从服务器读取信息时,可以通过 `get` 方法发起查询操作。这里展示如何通过参数传递的方式构建带有查询字符串的 URL 来检索特定条件下的用户资料: ```javascript instance.get('/users', { params: { page: 1, limit: 10 } }) .then((response) => { const users = response.data; console.log(users); }).catch((error) => { console.error('Error fetching data:', error.message); }); ``` 此段代码展示了利用 `params` 对象来进行简单的 GET 参数附加[^3]。 #### 处理 POST 请求提交表单数据 对于涉及修改或新增记录的操作,则应采用 `post` 方式传送 JSON 数据体给服务端。下面的例子说明了怎样把新用户的注册信息发送到远程地址: ```javascript const newUser = { name: "John Doe", email: "john@example.com" }; instance.post('/register', newUser) .then((response) => { alert(`User created successfully! Your ID is ${response.data.id}`); }).catch((error) => { console.error('Registration failed:', error.response ? error.response.statusText : error.message); }); ``` #### 添加拦截器增强安全性 考虑到 API 可能面临的各种威胁因素,建议为 Axios 配置响应拦截器以便于实施额外的安全策略,例如身份验证令牌刷新机制或是频繁请求检测等[^4]: ```javascript // 响应前拦截器:可以在每次发出请求之前做些预处理工作 instance.interceptors.request.use(config => { config.headers['Authorization'] = localStorage.getItem('token'); return config; }, error => Promise.reject(error)); // 响应后拦截器:用来捕获来自服务器的所有回复并对错误作出适当反应 instance.interceptors.response.use( response => response, async function (error) { if (error.response.status === 401 && !error.config._retry) { await refreshToken(); // 尝试重新获取有效 token... error.config._retry = true; return instance(error.config); // 重试原始请求 } return Promise.reject(error); }); ``` 以上介绍了几种常见的场景下使用 Axios 执行网络请求的方法和技术要点。当然实际开发过程中还会有更多复杂的情况等待探索解决!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值