如何避免在JavaScript中使用.then（）地狱？ [重复]

Posted 2023-02-03

此问题已经在这里有了答案：

• Avoiding callback hell in promises using nodejs2个答案

我很难排序我的API调用。所以我使用了then（）链来对它们进行排序。所有API和刷新令牌都是Promises / Async。它正在工作，但是有没有使用async / await的更简洁/更简单/更短的方法，因为我的父函数不是异步的。我不完全了解.then（）和async / await的行为

这是父函数中的代码：

 refreshToken().then(token => 
                let request =  //format request

                return axios.post(`$youtubeUrl/upload/youtube/v3/videos?access_token=$token&part=contentDetails`, request) //upload video
            )
            .then(uploadResponse => 
                let uploadResponse = ; //format uploadResponse

                refreshToken().then(token =>  //refresh the token again
                    return axios.put(`$youtubeUrl?access_token=$token`, uploadResponse) //update existing video
                )
                .then(updateResponse => 
                    let updateResponse = ; //format updateResponse

                    axios.post(`$BasePath/v1/videos`, updateResponse, headers)
                    .then(postResponse => 
                        if (postResponse.data.response === 'success') 
                            return dispatch(receivePostsData(postResponse.data))
                         else if (postResponse.data.response === 'failed') return dispatch(receivePostsData(postResponse.data))
                    )
                )
            )    
            .catch(error => 
                return dispatch(receivePostsData(error))
            )

答案

等待aysnc，您可以将回调地狱转换为此：

重要注意事项是：

• 该函数允许使用await之前的async关键字
• 要处理异常，您需要使用try catch块。

async function uploadToYoutube() 

    try 
        let token = await refreshToken();

        let request = 

        const youtubeUploadResponse = await axios.post(`$youtubeUrl/upload/youtube/v3/videos?access_token=$token&part=contentDetails`, request);

        let uploadResponse = ;

        token = await refreshToken();

        const youtubeUpdateResponse = await axios.put(`$youtubeUrl?access_token=$token`, uploadResponse);

        let updateResponse = ;

        let postResponse = await axios.post(`$BasePath/v1/videos`, updateResponse, headers);

        if (postResponse.data.response === 'success') 
            return dispatch(receivePostsData(postResponse.data))
         else if (postResponse.data.response === 'failed') 
            //??? why do you here act like a success?
            return dispatch(receivePostsData(postResponse.data))
        
     catch (error) 
        //??? why do you here act like a success?
        return dispatch(receivePostsData(error))
    

另一答案

如果使用的是ES6及更高版本，则可以使用异步等待