如何处理 firebase.auth.PhoneAuthProvider.credential 错误

Question

我正在使用 firebase phone authentication 对 firebase 上的用户进行身份验证。它工作正常，在使用 xyz 电话号码成功验证用户后，现在我想将电话号码更新为 abc，简而言之，我正在尝试更新用户的手机号码。 我找到了 firebase web api 来更新用户现有的手机号码，其工作原理如下。

以下功能将在用户想要注册的新电话号码上发送 otp。

function sentOTPToNewNumber() {
        var phoneNumber = document.getElementById("newPhone").value;
        var appVerifier = window.recaptchaVerifier;
        firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
            .then(function (confirmationResult) {

                // SMS sent. Prompt user to type the code from the message, then sign the
                // user in with confirmationResult.confirm(code).

                window.confirmationResult = confirmationResult;
            }).catch(function (error) {
                console.log(error)
            });
    }

在收到新号码的 otp 后，我们必须验证号码后面的功能是否正在执行此操作。

    function codeVerification() {
            var verificationCode = document.getElementById("verification").value;


       try {
                //at this line i am facing issue.
                var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, verificationCode) 

                console.log(credential);
                var result = userLocal.updatePhoneNumber(credential);    
                console.log(result);
            } catch (error) {
                console.log(error);     
            }
        }

如果用户在 codeVerification 函数中输入错误的 otp，我想处理一个错误。当我们尝试输入错误的 otp 时，我们使用的以下 api 会引发错误，但我无法处理 try catch 块内的错误。

firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, verificationCode)

我在google firebase 上找到了以下描述，但无法理解如何处理错误。我实现的try catch 块没有捕获firebase 抛出的错误。我也尝试使用 then(function(){}).catch(function(error){}) 它说 then 不是函数。

在我想要处理的控制台中出现以下错误。 注意：如果用户输入正确的 otp，我能够成功更新用户电话号码。唯一的问题是我想处理代码不正确或更新是否成功的情况。

感谢您的时间和支持，这将非常有帮助。

Answer 1

userLocal.updatePhoneNumber(credential) 调用返回一个Promise 对象（请参阅updatePhoneNumber docs），当出现问题时该对象会被拒绝。但是，您尝试捕获此错误的方式不正确，这就是您无法正确处理错误的原因。

要处理Promise 拒绝，在userLocal.updatePhoneNumber 之后链接.then().catch()，如下所示：

userLocal.updatePhoneNumber(credential)
    .then(/* Update successful */)
    .catch(function(error) {
        // Update failed
    });

如果您在代码中使用async/await，则可以保留当前拥有的try-catch 代码，但执行以下更改：

1. 将codeVerification 设为async 函数
2. await 致电userLocal.updatePhoneNumber

async function codeVerification() {
    ...
    try {
        ...
        var result = await userLocal.updatePhoneNumber(credential); 
        //           ^^^^^ notice the `await` keyword above
        // Update successful
    } catch (error) {
        // Update failed
    }
}

上述两种方案基本相同，只是语法不同。