在 async/await 之后使用 .then 是一种好方法吗？

Posted 2023-03-10

【中文标题】在 async/await 之后使用 .then 是一种好方法吗？

【英文标题】：Is it good way to use .then after async/await?

【发布时间】：2019-12-01 16:57:23

【问题描述】：

我有 react-native/graphql/apollo 应用程序。用户发出请求以从服务器获取凭据，并在通过 async/await 将凭据写入 Keychain 之后。如果成功，用户必须从 Auth 导航到主屏幕。我在 Keychain async/await 之后使用 .then 进行导航。有人可以告诉我这是一个好方法还是我不需要使用 .then？

const AuthScreen = ( navigation ) => 
  const sign = useMutation(SIGN_IN)
  const handleSignIn = code => 
    sign(
      variables:  code ,
      update: async (cache,  data ) => 
        const accessToken = data.signIn.accessToken
        const refreshToken = data.signIn.refreshToken
        await Keychain.setGenericPassword(accessToken, refreshToken)
      
    ).then(() => navigation.navigate('Home'))
  

  const getToken = async () => 
    // setLoading(true)
    RNAccountKit.configure(
      responseType: 'code',
      initialPhoneCountryPrefix: '+7',
      initialPhoneNumber: '9855316514',
      defaultCountry: 'RU'
    )
    const payload = await RNAccountKit.loginWithPhone()
    console.log('payload.code', payload.code)
    handleSignIn(payload.code)
  

  const  container  = styles
  return (
    <View style=container>
      <Text>Put your phone number for Login</Text>
      <Button title="Login" onPress=getToken />
    </View>
  )

【问题讨论】：

Mixing await and .then(…) synax 在同一个函数中对于可读性来说不是一个好主意，但否则它完全可以毫无问题地工作。这只是承诺。

【参考方案1】：

Async/await 只是 Promises 的语法糖。这个：

const handleSignIn = code => 
  sign(
    variables:  code ,
    update: async (cache,  data ) => 
      const accessToken = data.signIn.accessToken
      const refreshToken = data.signIn.refreshToken
      await Keychain.setGenericPassword(accessToken, refreshToken)
    
  ).then(() => navigation.navigate('Home'))

还有这个

const handleSignIn = async (code) => 
  await sign(
    variables:  code ,
    update: async (cache,  data ) => 
      const accessToken = data.signIn.accessToken
      const refreshToken = data.signIn.refreshToken
      await Keychain.setGenericPassword(accessToken, refreshToken)
    
  )
  return navigation.navigate('Home')

做同样的事情。 Async/await 只是让代码更易于阅读和推理。

【讨论】：

如果它“工作得更快”，您可能不会等待 sign 函数

如果你在 sign 前面省略了 await，这与使用 then 不同。您无需等待 Promise 完成即可触发 Promise，因此它“更快”，因为您的代码不会暂停 Promise 来解决。但这与您之前使用 then 所做的不同，后者仅在 Promise 解决后运行。