There are serveal tips I concluded during the migration to Async/Await in the work. Hope them could help you.

  1. Keep Original Logic
  2. Keep Original Error Handling

Below showes some example of a vechile sell page.

Keep Original Logic

For the serials API calls based on Promise:

const findSimilarAuto = (id) => {
    return service.getData('getAuto', {
        id
    }).then((auto) => {
        return service.getData('findAuto', {
            category: auto.category
        }).then((autoArr) => {
            return autoArr;
        });
    })
};

Async/Await version:

const = findSimilarAuto = async(id) => {
    let auto = await service.getData('getAutoDetail', {
        id
    });
    return await service.getData('findAuto', {
        category: auto.category
    });
};

For the parallel API calls based on Promise:

const loadPageData = (id) => {
    return Promise.all([
        service.getData('getAutoDetail', {
            id
        }),
        service.getData('findTopSearch', {}),
        service.getData('findRankedAuto', {})
    ]).then(([auto, topSearchArr, rankedAutoArr]) => {
        // ... some business code
        return {
            auto,
            topSearchArr,
            rankedAutoArr
        }
    })
};

Async/Await version:

const loadPageData = async (id) => {
    let {auto, topSearchArr, rankedAutoArr} = await Promise.all([
        service.getData('getAutoDetail', {
            id
        }),
        service.getData('findTopSearch', {}),
        service.getData('findRankedAuto', {})
    ]);
    // ... some business code
    return {
        auto,
        topSearchArr,
        rankedAutoArr
    }
};

Keep Original Error Handling

Cache call back based on Promise:

const findSimilarAuto = (id) => {
    return service.getData('getAuto', {
        id
    }).then((auto) => {
        return service.getData('findAuto', {
            category: auto.category
        }).then((autoArr) => {
            return autoArr;
        });
    }).catch((err) {
        console.error(err);
        throw err;
    })
};

Async/Await version:

const = findSimilarAuto = async(id) => {
    try {
        let auto = await service.getData('getAutoDetail', {
            id
        });
        return await service.getData('findAuto', {
            category: auto.category
        });
    } catch (err) {
        console.error(err);
        throw err;
    }

};
⤧  Next post SEO Overview ⤧  Previous post PNG24格式图片转换为PNG8