Is it good way to use .then after async/await?

Question

I have react-native/graphql/apollo app. The user makes the request to get credentials from the server and after they are written to Keychain by async/await. If it success the user have to navigate from Auth to Home screen. I use .then for the navigation after Keychain async/await. Can somebody tell me is it a good way or i don't need to use .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](https://stackoverflow.com/a/54387912/1048572) in the same function is not a good idea for readability, but otherwise yes it will totally work without problems. It's just promises. — Bergi, Jul 23 '19 at 16:57

score 1 · Accepted Answer · answered Jul 23 '19 at 17:47

Async/await is just syntatic sugar for Promises. This:

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

and this

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

do the same thing. Async/await just makes code easier to read and reason about.

if it "works faster" you're likely not awaiting the `sign` function — Daniel Rearden, Jul 23 '19 at 20:17
I just if you're omitting the `await` in front of `sign` it's not the same as using a `then`. You're firing the Promise without waiting for it to complete, so it's "faster" because your code doesn't pause for the Promise to resolve. But that's not the same as what you were doing before with the `then`, which only ran after the Promise resolved. — Daniel Rearden, Jul 24 '19 at 15:46

Is it good way to use .then after async/await?

1 Answers1