javascript - 如何避免 JavaScript 中的 .then() hell ？

Question

这个问题已经有答案了:

Avoiding callback hell in promises using nodejs (2 个回答)

已关闭 3 年前。

我很难对 API 调用进行排序。所以我使用 then() 链接来按顺序对它们进行排序。所有 API 和刷新 token 都是 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))
            })

Answer 1

使用 aysnc wait 您可以将回调 hell 转换为:

重要说明是:

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

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))
    }
}