angular - 如何使用 Angular 发送带有对象参数的 fetch api 请求？

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 方法调用 fetch。

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 ) 模块。