typescript API调用angular中的链接不调用API,但创建的链接在Postman中工作

yruzcnhs  于 2023-04-07  发布在  TypeScript
关注(0)|答案(1)|浏览(129)

我正在为一个训练营做一个应用程序,在那里我调用第三方API来获取狗的品种,然后我使用2个创建的API来存储用户和用户的收藏夹到2个用EF创建的SQL数据库中。我有一个Angular前端,这是所有这些都会交互的地方。
我试图从模态形式中创建一个用户对象,并使用来自我创建的API的API调用将其放入我的一个SQL数据库中,该API期望用户对象。
在开发工具中,我看到它开始创建链接字符串,这意味着对象已经创建,所有参数都已添加,但API调用不会发生,也不会发布到数据库。
另外,如果我将链接字符串复制并粘贴到postman中的API中,它会正确地将用户添加到数据库中,但API调用似乎不想将其发布到数据库中。
我的相关代码如下。任何帮助是非常感谢

前端
用户界面

export interface IUser{
    Id?: number
    firstName: string
    lastName: string
    email: string
    password: string
}

API.service.ts

export class ApiService {
  private breedUri = 'https://dog-breeds2.p.rapidapi.com/dog_breeds';
  private userApi ='https://localhost:7078/api/Users';
  private faveApi ='https://localhost:7078/api/FavoriteBreeds';

  constructor(private http: HttpClient){}

  addUser(newUser: IUser){

   const linkString = (this.userApi+"/add?firstName="+newUser.firstName+"&lastName="+newUser.lastName+"&email="+newUser.email+"&password="+newUser.password)

    console.log("user api link created",{linkString})
   return this.http.post(this.userApi +"/add", newUser)
   
  }

app.component.ts中的方法

constructor(private api: ApiService){}

    addNewUser(){
        this.addform = document.getElementById('loginForm');
        const formData = new FormData(this.addform);

      let newUser: IUser = {
       
        firstName: formData.get("firstName") as string,
        lastName: formData.get("lastName") as string,
        email: formData.get("email") as string,
        password: formData.get("psw") as string
       };
          console.log("user object being created check", {newUser})
          this.api.addUser(newUser);

      }

后台

[Route("api/[controller]")]
  [ApiController]
  public class UsersController : Controller
  {
    UsersRepository repo=new UsersRepository();

    [HttpPost("add")]
    public Users AddNewUser(Users newUser)
    {

      return repo.AddNewUser(newUser);
    }

my devtools showing the link and created user objectmy swagger

hgqdbh6s

hgqdbh6s1#

从这一行:

return this.http.post(this.userApi +"/add", newUser)

它返回一个Observable。Observable只有在订阅时才会被触发。因此,如果没有订阅,您的Angular端不会向API发送请求。您可以通过查看浏览器DevTools --〉Network选项卡并根据您要提交的API URL搜索请求来确定请求是否发送。
您需要订阅Observable并提供观察者来按场景(成功/错误回调)处理返回的Observable值(响应)。

addNewUser(){

  ...

  this.api.addUser(newUser).subscribe({
    next: (response: any) {
      // TO-DO: Handling when the response is succeed
    },
    error: (err: any) {
      // TO-DO: Handling when the response is failed
    },
    complete: () {
      // TO-DO: Handling when `next` and `error` callback is completed.
    }
  });
}

参考文献:

1.发出POST请求
1.订阅(可观察)

相关问题