【问题标题】:POST-request to get data from API从 API 获取数据的 POST 请求
【发布时间】:2020-05-07 18:50:14
【问题描述】:

我正在尝试为我的 API 创建一个登录系统,但我似乎无法在我的 Javascript 代码中得到响应。但是,在 POSTman 中,我可以:

https://i.stack.imgur.com/WneNm.png

这是我的 javascript 代码:

function loginUser(email, password) {
    let person = {Email: email, Password: password};
    fetch(UrlAuthenticationToken, {
        method: "POST",
        body: JSON.stringify(person),
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    })
        .then((response) =>{
            if (response.status === 200) {
                console.log(`Logged in ${response.status}`);
                return response.json(); // only for generating token
            } else {
                throw new Error(`error with status ${response.status}`);
            }
        })
        .then((response) => {

            let accessPass =
            {
                Token: reponse.Token,
                User:
                {
                    Email: reponse.User.Email,
                    Type: reponse.User.Type
                }
            }

            sessionStorage.setItem(accessPass);

            if(response.User.Type === 'Student'){
                window.href(UrlStudent);
            }
            else if(response.User.Type === 'Lector'){
                window.href(UrlLecturer)
            }
            else if(response.User.Type === 'Business'){
                window.href(UrlCompany)
            }
        })
        .catch((e) => {
            Console.log(e);
        });
};

问题是,我可以将我的 JSON 正文发送到后端,后端确实会返回响应,但前端似乎无法处理所述响应。我想知道出了什么问题;当我调试我的代码时,从第一个 .then 一直到最后,跳过其余部分。

【问题讨论】:

    标签: javascript c# post fetch webapi


    【解决方案1】:

    像这样?

    $.ajax({
      type : "POST",
      url : "http://localhost/service.asp",
      data: {Email: "asd@asd.asd", Password: "asdasd"},
      //data: '{Email: "asd@asd.asd", Password: "asdasd"}',
    
      headers : {          
        "Accept" : "application/json; charset=utf-8",         
        "Content-Type": "application/json; charset=utf-8"   
      }        
      success : function(response) {  
        Console.log(response);
      }
    });
    

    【讨论】:

    • 看起来像 function() 而不是 lambda 表达式可以解决问题。谢谢!
    • 你的意思是then((response) =>{
    • 是的,在 function() 工作时不知何故不起作用。怪我的课程...
    【解决方案2】:

    我看到的是您使用的是大写键,但在您的邮递员中,我可以看到所有键都是小写的。您使用了 response.Token 之类的键,大写 T。但邮递员的回复似乎像 response.token 小写。除此之外,您的代码也有一些类型错误。您在 accessPass 变量中的响应拼写错误。

    你的函数应该是这样的:-

    function loginUser(email, password) {
        let person = {Email: email, Password: password};
        fetch(UrlAuthenticationToken, {
            method: "POST",
            body: JSON.stringify(person),
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
            .then((response) =>{
                if (response.status === 200) {
                    console.log(`Logged in ${response.status}`);
                    return response.json(); // only for generating token
                } else {
                    throw new Error(`error with status ${response.status}`);
                }
            })
            .then((response) => {
    
                let accessPass =
                {
                    Token: response.token,
                    User:
                    {
                        Email: response.user.email,
                        Type: response.user.type
                    }
                }
    
                sessionStorage.setItem(accessPass);
    
                if(response.user.type === 'Student'){
                    window.href(UrlStudent);
                }
                else if(response.user.type === 'Lector'){
                    window.href(UrlLecturer)
                }
                else if(response.user.type === 'Business'){
                    window.href(UrlCompany)
                }
            })
            .catch((e) => {
                Console.log(e);
            });
    };
    

    【讨论】:

    • 它首先与错误无关,但后来它解决了另一个问题。所以,谢谢!
    猜你喜欢
    • 1970-01-01
    • 2019-11-26
    • 2017-11-26
    • 2017-08-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-08-16
    • 2016-08-01
    相关资源
    最近更新 更多