承诺回调中的异步函数

Question

我正在尝试做这样的事情，但它正在崩溃：

myAsyncFunction = async () => {
    fetchResource().then( res => {
        await fetchAnotherResource()
        ....
    })
}

在第一个承诺的完成中，我想使用 await 表达式，但看起来回调的范围不允许异步函数。

按照上面的方式，它告诉我 await 是一个保留关键字(在这种情况下，它没有为 await 选择任何含义，因为我猜的范围？

如果我像这样async声明匿名函数：

fetchResource().then( async (res) => {...})

我收到这样的语法错误：

ProductForm.jsx?130a:143 Uncaught (in promise) TypeError: (0 , _context.t1) is not a function

我不确定它是否相关，但这是在 React 组件内部。

是否有语法可以完成我在这里尝试做的事情？(使用异步函数作为承诺处理程序(

编辑：相关代码(抱歉代码转储(

initializeState = async () => {
    getShopInfo(this.state.shop_id)
    .then (async (res) => {
        if (product_id) {
            ({ activeLocalization, localizations } = await this.initializeEditState(product_id, defaultLocalization, localizations))
        } else {
            ({ activeLocalization, localizations } = await this.initializeBlankState(defaultLocalization, localizations))
        }
    })
}
initializeEditState = (product_id, defaultLocalization, localizations, allCategoriesPromises) => {
    return new Promise( resolve => {
        let productPromiseArray = []; // storage for auxiliary localization requests
        let filledOutLocalizations = []; // hold localizations that have been merged with the product data 
        getProduct(product_id, defaultLocalization.localization_id)
        .then( json => {
            /* fetch object that will represent a product in state 
            * and merge it with the default localization object */
            let defaultProductState = this.setupEditProductState(json)
            defaultLocalization = Object.assign(defaultLocalization, defaultProductState)
            /* setup promise array for all other localizations */
            localizations.forEach( l => {
                productPromiseArray.push(getProduct(product_id, l.localization_id)) 
            })
            /* fetch other products and merge them with localizations */
            Promise.all( productPromiseArray )
            .then( resultArray => {
                resultArray.forEach( res => {
                    /* test for fail condition here;
                    * fail condition happens when new localizations 
                    * are registered between edits */
                    let loc = localizations.find( 
                        l => l.localization_id ==  res.data.product.localization_id
                    )
                    if (res.result) {
                        loc = Object.assign(loc, this.setupEditProductState(res))
                    } else {
                        /* Default state for this localization 
                        * (you should have access to defaultLocalization) */
                        loc = Object.assign(defaultProductState, loc)
                    }
                    filledOutLocalizations.push(loc)
                }) 
                /* Finally, get ALL category lists and
                    * INITIALIZE EDIT STATE */
                let promiseArray = []
                for (var filLoc of filledOutLocalizations) {
                    promiseArray.push(getAllCategories(filLoc.localization_id))
                }
                resolve({ activeLocalization: defaultLocalization, localizations: filledOutLocalizations })
            })
        })
    })
}
initializeBlankState = ( defaultLocalization, localizations ) => {
    return new Promise( resolve => {
        let activeLocalization = Object.assign( 
            defaultLocalization, 
            this.getBlankState(defaultLocalization.localization_id)
        )
        activeLocalization.product.enable_flg = 1
        localizations = localizations.map( l => {
            return Object.assign(l, this.getBlankState(l.localization_id))
        })
        resolve({ activeLocalization, localizations })
    })
}

Answer 1

该代码在原始版本中不起作用await因为它只能在async函数中使用。then内部函数有自己的作用域，不再与外部作用域相关;因此使用await是无效的。

第二个版本，其中async放在then内，违反了返回类型。从MDN对Promise.prototype.then的定义：

then(( 方法返回一个承诺

和 MDN 对async function的定义：

异步函数声明定义了一个异步函数，该函数 返回一个 AsyncFunction 对象

您可以看到这两者不应一起使用。

通常，async-await用于替换Promise - then - catch，而不是一起使用。因此，对于您的示例函数，它应该是：

myAsyncFunction = async () => {
    const resource = await fetchResource();
    if (isValidResource(resource)) {
        const anotherResource = await fetchAnotherResource();
        ...
    }
}

对于您的函数 initializeState ，它使用 async ：

initializeState = async () => {
    const res = await getShopInfo(this.state.shop_id);
    if (product_id) {
        ({ activeLocalization, localizations } = await this.initializeEditState(product_id, defaultLocalization, localizations))
    } else {
        ({ activeLocalization, localizations } = await this.initializeBlankState(defaultLocalization, localizations))
    }
}

Answer 2

在我看来async then(..)内部在你的情况下是多余的。只需继续使用 Promises.In fetchResource().then( res => fetchAnotherResource()).then(res=>{code...})最后一个代码将等待fetchAnotherResource(..)完成。 所以，你的代码

.then (async (res) => {
    if (product_id) {
        ({ activeLocalization, localizations } = await this.initializeEditState(product_id, defaultLocalization, localizations))
    } else {
        ({ activeLocalization, localizations } = await this.initializeBlankState(defaultLocalization, localizations))
    }
})

可以像

.then ((res) => product_id?
                 this.initializeEditState(product_id, defaultLocalization, localizations)):
                 this.initializeBlankState(defaultLocalization, localizations))
)
.then(({activeLocalization,localizations})=>{.....})