如何使用 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) 模块。

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 - 使用 Fetch