Question

我尝试将json格式的用户对象发送到后端，并在后端从参数中获取用户名，密码，电子邮件等。这是我的后端代码：

@PostMapping("/login")
    public User loginUser(@RequestBody User user) throws Exception {
        User userObj = null;
        if (!isNull(user.getEmail()) && !isNull(user.getPassword())) {
            userObj = userService.getUserByEmailAndPassword(user);
        }
        if (isNull(userObj)) {
            throw new Exception("Bad credentials");
        }
        return userObj;
    }

如您所见，我没有发送字符串参数，而是发送了整个对象。

在前端，我的组件代码是：

async loginUser(user:User) {
   let response = await this._service.LoginUser(user);
   let data = response.json();
   console.log(data);
 }

并且此代码正在从服务类中调用以下方法，

LoginUser(user: User) {
    var url = new URL"http://localhost:8080/login");
    var params =[[user]];
    url.search = new URLSearchParams(user).toString;
    return fetch("http://localhost:8080/login", user)
  }

但是发送带有参数 user 的请求存在一些问题。如何提出此请求？（不使用Jquery）

Answer 1

@PostMapping("/login")

您将login端点定义为POST方法，因此必须使用POST方法调用访存。

LoginUser(user: User) {
  return fetch("http://localhost:8080/login", {
    method: 'POST',
    body: JSON.stringify(user)
  });
}

注意：如果您按照标题中所述使用Angular 2+，则最好使用Angular的内置HttpClient（https://angular.io/api/common/http/HttpClient）模块。

Answer 2

fetch()默认情况下，发送一个GET请求，并且在发出fetch请求时您不需要将第二个参数传递给GET。

如果您想使用查询参数在URL中传递用户数据，则需要将带有查询字符串的URL作为唯一参数传递给fetch

LoginUser(user: User) {
    var url = new URL"http://localhost:8080/login");
    url.search = new URLSearchParams(user);
    return fetch(url.toString());
}

如果您尝试登录用户，请不要在URL中传递用户身份验证数据。而是发出POST请求。

要发送POST请求，您需要向fetch()传递第二个参数，该参数是一个包含表示各种请求选项的不同属性的对象。

fetch("http://localhost:8080/login", {
  method: 'POST',
  body: JSON.stringify(user)
}

有关Fetch API的详细信息，请参见MDN - Using Fetch

如何使用Angular发送带有对象参数的获取api请求？

2 个答案: