如何使用Angular Ionic从API获取数据及实现增删改查

这里是一套基于Angular HttpClient实现的API交互方法，涵盖了常见的GET/POST/DELETE/PUT操作，可直接用于实现从API获取及操作数据的需求：

// 基础GET请求示例
this.http.get(`${this.apiUrl}`);

// 获取列表/单条数据方法
getData(): Observable<any> {
 return this.http.get(`${this.apiUrl}`);
}

// 提交新增数据方法
postData(data: any): Observable<any> {
  const headers = new HttpHeaders({
    'Content-Type': 'application/json',
  });
 return this.http.post(`${this.apiUrl}/add`, data, { headers });
}

// 根据标识删除数据方法
deleteData(query: any): Observable<any> {
  return this.http.delete(`${this.apiUrl}/${query}`);
}

// 根据标识更新数据方法
updateData(query: any, data: any): Observable<any> {
  return this.http.put(`${this.apiUrl}/${query}`, data);
}

实用注意事项： #

• 必须在Angular项目的核心模块（如AppModule）中导入HttpClientModule，并在服务的构造函数中注入HttpClient实例（示例：constructor(private http: HttpClient) {}）
• 避免使用any类型，建议定义具体的接口来约束请求/响应数据，比如interface User { id: number; name: string; }，再将Observable<any>替换为Observable<User[]>或Observable<User>，提升代码的类型安全性和可维护性
• Observable是惰性执行的，必须调用.subscribe()才能触发实际的API请求，示例：

  this.yourServiceName.getData().subscribe({
    next: (data) => {
      // 处理成功返回的数据
    },
    error: (err) => {
      // 处理请求失败的异常（如网络错误、后端报错）
    }
  });
  

• post方法中设置的Content-Type头，确保了请求体以JSON格式发送，适配绝大多数后端框架的解析逻辑

内容的提问来源于stack exchange，提问作者BIO GAMMER