首页 > 解决方案 > 在 async/await 之后使用 .then 是一种好方法吗?

问题描述

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

标签: react-nativepromiseasync-awaitapollo

解决方案


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 只是让代码更易于阅读和推理。


推荐阅读