颤振异步等待未按预期工作

Question

自从我开始使用Flatter以来，我面临着一个与Flatter async await相关的问题。大多数时候，我试图用未来和等待的结果，它跳过等待，并得到最短的方式返回如果我尝试在wait之后打印，则先打印空值，然后调用wait

这是我的密码

 onPressed: () async {
                  if (_textEditingController.text.isNotEmpty) {
                    Map a = await Authentication.sendOtp(
                        phoneNum: _textEditingController.text);
                    print(a);
                  }
                },

和我的身份验证类：

class Authentication {
 static Future<Map> sendOtp({required String phoneNum}) async {
    String? vid;
    try {
      if (!kIsWeb) {
        await FirebaseAuth.instance.verifyPhoneNumber(
          phoneNumber: phoneNum,
          verificationCompleted: (PhoneAuthCredential credential) {},
          verificationFailed: (FirebaseAuthException e) {},
          timeout: const Duration(seconds: 5),
          codeSent: (String verificationId, int? resendToken) {
            print('Code Sent $verificationId');
            vid = verificationId;
          },
          codeAutoRetrievalTimeout: (String verificationId) {},
        );
      } else {
        final recaptchaVerifier = RecaptchaVerifier(
            container: null,
            size: RecaptchaVerifierSize.compact,
            theme: ThemeMode.system as RecaptchaVerifierTheme);
        await FirebaseAuth.instance
            .signInWithPhoneNumber(phoneNum, recaptchaVerifier)
            .then((confirmationResult) {
          vid = confirmationResult.verificationId;
        });
      }
      return {'msg': vid, 'val': false};
    } on FirebaseAuthException catch (e) {
      print('------${e.code}');
      return {'msg': e.code, 'val': true};
    } catch (e) {
      print(e);
      return {'msg': null, 'val': true};
    }
  }
}

我得到的输出：

I/flutter (14230): {msg: null, val: false}
E/zzf     (14230): Problem retrieving SafetyNet Token: 7: 
W/System  (14230): Ignoring header X-Firebase-Locale because its value was null.
W/System  (14230): A resource failed to call end. 
W/System  (14230): A resource failed to call end. 
D/EGL_emulation(14230): eglCreateContext: 0xef618f80: maj 2 min 0 rcv 2
E/zzf     (14230): Failed to get reCAPTCHA token with error [The web operation was canceled by the user.]- calling backend without app verification
I/FirebaseAuth(14230): [FirebaseAuth:] Preparing to create service connection to fallback implementation
W/System  (14230): Ignoring header X-Firebase-Locale because its value was null.
I/flutter (14230): Code Sent AJOnW4ROl1S4AeDErwZgls2LAxaQuwURrzDMJ1WNjQH8hWce-BTUeUE21JyCvHpMvfxT4TA8Hcp-mSWFqlzzX-IEd7X6z8ry1mkeCHC7u_ir-lnBL89OP0M6-4kU7BlOKcMPBY5OT4pmpdjETCoyAhrdc8TBR8yJqw
W/FirebaseAuth(14230): [SmsRetrieverHelper] Timed out waiting for SMS.

请帮助我更好地理解flatter async wait，或者告诉我哪里做错了，这样我就可以改进我的代码

Answer 1

你使用的wait本身并不是错误的，但你的预期是错误的。

FirebaseAuth。例子verifyPhoneNumber将在执行该功能后完成其未来功能，但它不会等待短信发送。这里的未来表明，电话验证过程已经开始。换句话说，codeSent回调将在未来完成后的稍后时间调用（即，直到SMS发送给用户）：

 /// [codeSent] Triggered when an SMS has been sent to the users phone, and
 ///   will include a [verificationId] and [forceResendingToken].

您需要在您的应用程序/小部件中说明这种行为。

以下是一种方法：

将函数定义更改为：

static Future<void> sendOtp({required String phoneNum, required PhoneCodeSent codeSent}) {
    String? vid;
    try {
      if (!kIsWeb) {
        await FirebaseAuth.instance.verifyPhoneNumber(
          phoneNumber: phoneNum,
          verificationCompleted: (PhoneAuthCredential credential) {},
          verificationFailed: (FirebaseAuthException e) {},
          timeout: const Duration(seconds: 5),
          codeSent: codeSent, // <~~ passed from your app
          codeAutoRetrievalTimeout: (String verificationId) {},
        );
      }
    // the rest is the same without return values tho
}

由于您编辑了上面的代码以在调用codeSent后让应用程序接收数据，因此您无需从sendOtp返回任何内容。

现在在您的小部件中：

onPressed:  () async {
    if (_textEditingController.text.isNotEmpty) {
      await Authentication.sendOtp(
        phoneNum: _textEditingController.text,
        codeSent: (String verificationId, int? resendToken) {
          // #2 Once this is called (which will be after the `print(a)` below),
          // update your app state based on the result (failed or succeeded)
        }
      );
      // #1 update your app state to indicate that the 'Message is on the way'
      // maybe show a progress indicator or a count down timer for resending
     // print(a);  <~~ there's no `a` anymore
    }
  };

正如您在上面看到的，代码#1将在代码#2之前执行，因为codeSent将在稍后的时间调用。我不确定是否有超时，或者你是否必须保留自己的计时器。

如果您不想在UI处理数据，您可以将回调更改为其他内容并使其像以前一样返回Map：

static Future<void> sendOtp({required String phoneNum, required ValueChanged<Map<String, dynamic>> onCodeSent}) {
    String? vid;
    try {
      if (!kIsWeb) {
        await FirebaseAuth.instance.verifyPhoneNumber(
          phoneNumber: phoneNum,
          verificationCompleted: (PhoneAuthCredential credential) {},
          verificationFailed: (FirebaseAuthException e) {},
          timeout: const Duration(seconds: 5),
          codeSent: (String verificationId, int? resendToken) {
            onCodeSent.call({'msg': verificationId, 'val': true});
          },
          codeAutoRetrievalTimeout: (String verificationId) {},
        );
      }
// the rest is the same without return values tho
}

在你的小部件上，你可以这样做：

onPressed:  () async {
    if (_textEditingController.text.isNotEmpty) {
      await Authentication.sendOtp(
        phoneNum: _textEditingController.text,
        codeSent: (Map<String, dynamic> map) {
          setState((){ 
             a = map
          });
        }
      );
 
    }
  };

这同样适用于web部分，只需使用映射调用回调：

final recaptchaVerifier = RecaptchaVerifier(
            container: null,
            size: RecaptchaVerifierSize.compact,
            theme: ThemeMode.system as RecaptchaVerifierTheme);
        await FirebaseAuth.instance
            .signInWithPhoneNumber(phoneNum, recaptchaVerifier)
            .then((confirmationResult) {
          onCodeSent.call({'vid': confirmationResult.verificationId, 'val': true);
        });
      }