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

Posted 2023-02-27

【中文标题】如何使用 Angular 发送带有对象参数的 fetch api 请求？

【英文标题】：How to send fetch api request with object parameter with Angular?

【发布时间】：2020-11-16 00:15:30

【问题描述】：

我尝试将 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）

【参考方案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) 模块。

【参考方案2】：

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

如果要使用查询参数在 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

【讨论】：

感谢您的回答，但我收到“415 Unsupported Media Type”错误，并且请求甚至没有到达后端。我应该在后端修改一些东西吗？

415 错误代码表示服务器拒绝接受请求，因为负载格式是不受支持的格式。如果您以后端期望的格式发送数据，请检查开发者工具中的网络选项卡。