Before I get the verification code, I need to call the interface of verification account and verification image verification code. Only when these two interfaces success is true can I call the SMS verification code interface.

at present, my way of dealing with it is a little stupid. Don"t know how to write more optimized 

getCode(){
 this.$post("api",{phone:this.phone}).then(res=>{
   if (res.success) {
     this.$post("api",{imgCode:this.imgCode}).then(res=>{
       if (res.success) {
         this.$post("api",{SMSCode:this.Code}).then(res=>{
           if (res.success) {
                  
           }
         })
       }
     })
   }
 })
}
Javascript
Mar.14,2021

Don't talk nonsense, just go to the code: 

getCode(){
     // :
     Promise.all([
         this.$post('api',{phone:this.phone}).then(res => {
             if (!res.success) throw new Error('')
         }),
         this.$post('api',{imgCode:this.imgCode}).then(res=>{
             if (!res.success) throw new Error('')
         }),
     ]).then(() => {
         // return
         return this.$post('api',{SMSCode:this.Code}).then(res=>{
           if (!res.success) throw new Error("")
         })
     }).then(() => {
         // 
     }).catch((err) => {
         // :
         alert(err)
     })
 }

its practical async/await is more comfortable to write: 

async getCode(){
     try {
         // :
         await Promise.all([
             this.$post('api',{phone:this.phone}).then(res => {
                 if (!res.success) throw new Error('')
             }),
             this.$post('api',{imgCode:this.imgCode}).then(res=>{
                 if (!res.success) throw new Error('')
             }),
         ])
         
         const res = await this.$post('api',{SMSCode:this.Code})
         if (!res.success) {
             throw new Error("")
         }
         
         // ...
     } catch (err) {
         // :
         alert(err)
     }
 }

by the way, the front end can actually do more:

  1. check the format of mobile phone number
  2. Picture CAPTCHA

of course, these two checks must also be done by the server, and the front-end user experience will be better (faster).

with regard to the verification of the image verification code, please do not return the image verification code directly to the front end. Instead, you should return a hash value (preferably the hash value after adding salt) to the front end, and then the front end verifies whether the hash value of the verification code entered by the user is the same as the hash value returned by the backend. An error will be reported if the hash value entered by the user is the same as the hash value returned by the backend.

promise.all ()

1. I think mobile phone verification can be done at the front end, and there is no need to transmit it to the background for verification. In this way, there can be one less post
2. If you have to be at the front end, you can use Promise,. I think it can be a little more elegant, similar to

. 
let phonePro = new Promise(...),imgPro = new Promise(...);
Promise.all([phonePro,imgPro]).then(res=>{
    //res
    if(res[0].success && res[1].success){
        ...//
    }
})

if you don't understand, please see MDN-Promise , and the related api introduction

.

one API is enough: send SMS verification code with user name (mobile number) and image verification code parameters. Verify these two parameters first. If there is no problem, send an SMS message directly; if there is any problem, report an error.
there is no need to call the interface twice to verify the two parameters.

Previous: Client network interface optimization, is there any time delay in merging interfaces, resulting in the possibility of failure?

Next: The access speed of nginx domain name is very slow and optimized.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu