async await处理异步请求数据

最新推荐文章于 2023-12-22 17:44:17 发布

小皇帝web前端

最新推荐文章于 2023-12-22 17:44:17 发布

阅读量1.4k

点赞数

分类专栏： web前端 vue

本文链接：https://blog.csdn.net/qq_39464969/article/details/106903991

版权

本文详细探讨了JavaScript中的async/await语法，如何利用它们优雅地处理异步请求，避免回调地狱，提高代码可读性和维护性。通过实例解析异步流程控制，包括Promise链的使用以及错误处理策略。

摘要由CSDN通过智能技术生成

vue使用axios向后端发送请求。默认是异步发送请求。
    例如：
        handleSubmitTest(systemId) {
            fetchGetProjectInfoBySystemId(systemId).then(response => {
                const projectObj = response.data.data
                const branchObj = this.getBranchInfoByProjectId(projectObj.id)
                console.log('test2')
            })
        }
        getBranchInfoByProjectId(projectId) {
            const branchObj = fetchGetBranchInfoByProjectId(projectId).then(response => {
                console.log('test1')
                return response.data.data
            })
            return branchObj
        }
    上述代码执行结果:
    先输出test2，再输出test1。
    
    要想保证先同步执行，需要添加async、await组合。
        handleSubmitTest(systemId) {
            fetchGetProjectInfoBySystemId(systemId).then(async response => {
                const projectObj = response.data.data
                const branchObj