react中使用async/await处理异步axios的请求

最新推荐文章于 2025-06-25 09:24:41 发布

原创最新推荐文章于 2025-06-25 09:24:41 发布 · 1.6w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#react #async/await

React+react router 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何在React项目中使用ES8的async/await特性进行异步操作，通过示例代码展示了如何利用该特性优化axios请求，实现更简洁、易读的数据获取流程。

async/await 是个非常好用的处理的异步的es8新功能。

在react中使用也是特别方便的，如果你是通过create-react-app 创建的项目就不要担心浏览器的支持。直接使用即可。

直接上代码演示，我的axios是经过封装过后Promise。使用原生的也是一样效果，axios原生返回的也是Promise ，所以可以直接通过let result = awiat Promise 中resolve 和 reject 的结果

requestUserData = async() => {       
        let roleId = this.state.selectedItem.roleId;
        this.params.conditionId = roleId;
        
        let noAuthUserResult = await axios.ajax({
            url: api.sys_auth_user_selectForPageNoAuthUser,
            data: this.params
        })
        let authUserResult = await axios.ajax({
            url: api.sys_auth_user_selectForPageAuthUser,
            data: this.params
        })
        if (!noAuthUserResult.status && !authUserResult.status){
            let targetKeys=[];
            let noAuthUserResultList = noAuthUserResult.data.recordList.map((item) => {
                item.key = item.userId;
                return item;
            });
            let authUserResultList = authUserResult.data.recordList.map((item) => {
                item.key = item.userId;
                targetKeys.push(item.userId);
                return item;
            });

            this.setState({
                leftData: [...noAuthUserResultList, ...authUserResultList],
                targetKeys: targetKeys,
                isVisibleTransfer: true
            })
        }else{
            Modal.info({
                title: "请求数据失败",
                content: ""
            })
        }        
    }