When the API call is success this function is performing as intended, but if an error occurs like 409 I am getting Uncaught (in promise) error in console. The JS in here is making an API call for signup. What is that I am doing wrong ?
Thanks in advance.

signup.js
This comes in combo with signup.html

$("#signup").click(async function(){
    let username     = $("#username").val();
    let password     = $("#password").val();
    let rePassword   = $("#re_password").val();
    let emailID      = $("#email_id").val();
    let phone        = $("#phone").val();
    let genderTypeId = $("#gender").val();
    let captchaId    = $("#captcha_pic").val();
    let captchaCode  = $("#captcha_code").val();

    try{
        verifyUsername(username);
        verifyPassword(password);
        
        if(password !== rePassword){
            const errorMessage = `Passwords not matching.`;
            throw { message: errorMessage };
        }
        verifyPhone(phone)
        verifyEmailID(emailID);
        verifyCaptchaCode(captchaCode);
    }catch(err){
        showError(err.message);
    }

    const apiResponse = await signup(username, password, phone, genderTypeId, emailID, captchaId, captchaCode);
    if(apiResponse[0] == true){
        window.location.replace("login.html");
    }else{
        const error = apiResponse[2].detail;
        showError(error);
    }
});

api.js
This file contains code to communicate with the API

async function signup(username, password, phone, genderTypeId, emailID, captchaId, captchaCode){
    // Signup
    paramData = "username="   username   "&password="   password;
    paramData  = "&captcha_id="   captchaId   "&captcha_code="   captchaCode;
    paramData  = "&private_email_id="   emailID   "&private_phone="   phone;
    paramData  = "&gender_type_id="   genderTypeId;
    let dataToReturn = null;

    await $.ajax(await{
        type: "POST",
        url: BASE_URL   '/signup?'   paramData,
        beforeSend : function(xhr) { 
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); }, 
        success: function(data) {
            console.log('signup success');
            dataToReturn = [true, data];
        },
        error: function(jqXHR) {
            console.log('signup failed');
            dataToReturn = [false, jqXHR.status, jqXHR.responseJSON["detail"]];
            console.log(dataToReturn); // works fine
        },
    });
    console.log(dataToReturn); // not working
    return dataToReturn;
}

Console log:

gender_type fetch success api.js:533:21
signup captcha created api.js:573:21
signup executing signup.js:34:13
XHRPOSThttp://192.168.5.222:8000/signup?username=thinkkll&password=password&captcha_id=4e27e8d4-a9b0-4e0b-9caf-8336de48fedc&captcha_code=45303&private_email_id=sdf&private_phone=9495954685&gender_type_id=1
[HTTP/1.1 406 Not Acceptable 5ms]

signup failed api.js:125:21
Array(3) [ false, 406, "USERNAME_TAKEN" ]
api.js:127:21
Uncaught (in promise) 
Object { readyState: 4, getResponseHeader: getResponseHeader(key), getAllResponseHeaders: getAllResponseHeaders(), setRequestHeader: setRequestHeader(name, value), overrideMimeType: overrideMimeType(type), statusCode: statusCode(map), abort: abort(statusText), state: state(), always: always(), catch: catch(fn), … }
signup.js:41:18

CodePudding user response：

async function signup(username, password, phone, genderTypeId, emailID, captchaId, captchaCode){
    // Signup
    paramData = "username="   username   "&password="   password;
    paramData  = "&captcha_id="   captchaId   "&captcha_code="   captchaCode;
    paramData  = "&private_email_id="   emailID   "&private_phone="   phone;
    paramData  = "&gender_type_id="   genderTypeId;
    let dataToReturn = null;

    try{
        await $.ajax(await{
            type: "POST",
            url: BASE_URL   '/signup?'   paramData,
            beforeSend : function(xhr) { 
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); }, 
            success: function(data) {
                console.log('signup success');
                dataToReturn = [true, data];
            },
            error: function(jqXHR) {
                console.log('signup failed');
                dataToReturn = [false, jqXHR.status, jqXHR.responseJSON];
            },
        });
    }finally{
        return dataToReturn;
    }
}

CodePudding user response：

async function signup(username, password, phone, genderTypeId, emailID,
    captchaId, captchaCode) {
    // Signup
    paramData = "username="   username   "&password="   password;
    paramData  = "&captcha_id="   captchaId   "&captcha_code="   captchaCode;
    paramData  = "&private_email_id="   emailID   "&private_phone="   phone;
    paramData  = "&gender_type_id="   genderTypeId;
    let dataToReturn = null;
    try {
      const res = await getSignup(paramData);
      const data = await res.json();
      if (data.status !== 200) {
        // i don't know the format of your data response so you can change it 
        //depend response data format
        dataToReturn = [false, data.status, data.errors.detail]

      } else {
        dataToReturn = [true, data];
      }

    } catch (err) {
      alert(err);
    }

    function getSignup(paramData) {
      return $.ajax(await {
            type: "POST",
            url: BASE_URL   '/signup?'   paramData,
            beforeSend: function(xhr) {
              xhr.setRequestHeader("Content-Type", "application/x-www-form- 
                urlencoded;
                "); }, 

              });
          }