Ionic HTTP请求 #

// app.module.ts
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
  ]
})
export class AppModule {}

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html'
})
export class HomePage {
  constructor(private http: HttpClient) {}
  
  getUsers() {
    this.http.get<any[]>('https://api.example.com/users').subscribe({
      next: (data) => console.log(data),
      error: (error) => console.error(error)
    });
  }
}

// 基本GET请求
getUsers() {
  return this.http.get<User[]>('/api/users');
}

// 带参数的GET请求
import { HttpParams } from '@angular/common/http';

searchUsers(keyword: string, page: number) {
  const params = new HttpParams()
    .set('keyword', keyword)
    .set('page', page.toString());
  
  return this.http.get<User[]>('/api/users', { params });
}

// 带选项的GET请求
getUser(id: string) {
  return this.http.get<User>(`/api/users/${id}`, {
    observe: 'response',
    responseType: 'json'
  });
}

// 基本POST请求
createUser(user: User) {
  return this.http.post<User>('/api/users', user);
}

// 带选项的POST请求
login(credentials: LoginCredentials) {
  return this.http.post<AuthResponse>('/api/auth/login', credentials, {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  });
}

updateUser(id: string, user: User) {
  return this.http.put<User>(`/api/users/${id}`, user);
}

partialUpdateUser(id: string, changes: Partial<User>) {
  return this.http.patch<User>(`/api/users/${id}`, changes);
}

deleteUser(id: string) {
  return this.http.delete<void>(`/api/users/${id}`);
}

// services/api.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private baseUrl = 'https://api.example.com';
  
  constructor(private http: HttpClient) {}
  
  get<T>(endpoint: string, params?: any): Observable<T> {
    let httpParams = new HttpParams();
    
    if (params) {
      Object.keys(params).forEach(key => {
        httpParams = httpParams.set(key, params[key]);
      });
    }
    
    return this.http.get<T>(`${this.baseUrl}${endpoint}`, { params: httpParams });
  }
  
  post<T>(endpoint: string, data: any): Observable<T> {
    return this.http.post<T>(`${this.baseUrl}${endpoint}`, data);
  }
  
  put<T>(endpoint: string, data: any): Observable<T> {
    return this.http.put<T>(`${this.baseUrl}${endpoint}`, data);
  }
  
  patch<T>(endpoint: string, data: any): Observable<T> {
    return this.http.patch<T>(`${this.baseUrl}${endpoint}`, data);
  }
  
  delete<T>(endpoint: string): Observable<T> {
    return this.http.delete<T>(`${this.baseUrl}${endpoint}`);
  }
}

// services/user.service.ts
import { Injectable } from '@angular/core';
import { ApiService } from './api.service';
import { Observable } from 'rxjs';

export interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string;
}

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private endpoint = '/users';
  
  constructor(private api: ApiService) {}
  
  getUsers(params?: { page?: number; limit?: number }): Observable<User[]> {
    return this.api.get<User[]>(this.endpoint, params);
  }
  
  getUser(id: string): Observable<User> {
    return this.api.get<User>(`${this.endpoint}/${id}`);
  }
  
  createUser(user: Partial<User>): Observable<User> {
    return this.api.post<User>(this.endpoint, user);
  }
  
  updateUser(id: string, user: Partial<User>): Observable<User> {
    return this.api.put<User>(`${this.endpoint}/${id}`, user);
  }
  
  deleteUser(id: string): Observable<void> {
    return this.api.delete<void>(`${this.endpoint}/${id}`);
  }
}

// interceptors/auth.interceptor.ts
import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthService } from '../services/auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private auth: AuthService) {}
  
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const token = this.auth.getToken();
    
    if (token) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
    }
    
    return next.handle(request);
  }
}

// interceptors/logging.interceptor.ts
import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpResponse,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, tap } from 'rxjs';

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const startTime = Date.now();
    
    return next.handle(request).pipe(
      tap({
        next: (event) => {
          if (event instanceof HttpResponse) {
            const duration = Date.now() - startTime;
            console.log(`${request.method} ${request.url} - ${duration}ms`);
          }
        },
        error: (error: HttpErrorResponse) => {
          const duration = Date.now() - startTime;
          console.error(`${request.method} ${request.url} - ${duration}ms - Error: ${error.message}`);
        }
      })
    );
  }
}

// interceptors/error.interceptor.ts
import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Router } from '@angular/router';
import { ToastController } from '@ionic/angular';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(
    private router: Router,
    private toastCtrl: ToastController
  ) {}
  
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        let message = '发生未知错误';
        
        if (error.error instanceof ErrorEvent) {
          message = `客户端错误: ${error.error.message}`;
        } else {
          switch (error.status) {
            case 0:
              message = '网络连接失败';
              break;
            case 401:
              message = '未授权，请重新登录';
              this.router.navigate(['/auth/login']);
              break;
            case 403:
              message = '没有权限访问';
              break;
            case 404:
              message = '请求的资源不存在';
              break;
            case 500:
              message = '服务器内部错误';
              break;
            default:
              message = error.error?.message || `请求失败 (${error.status})`;
          }
        }
        
        this.showToast(message);
        return throwError(() => error);
      })
    );
  }
  
  private async showToast(message: string) {
    const toast = await this.toastCtrl.create({
      message,
      duration: 3000,
      color: 'danger',
      position: 'top'
    });
    await toast.present();
  }
}

// app.module.ts
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './interceptors/auth.interceptor';
import { LoggingInterceptor } from './interceptors/logging.interceptor';
import { ErrorInterceptor } from './interceptors/error.interceptor';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
  ]
})
export class AppModule {}

// services/user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError, retry, catchError } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {}
  
  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('/api/users').pipe(
      retry(2),
      catchError(this.handleError)
    );
  }
  
  private handleError(error: HttpErrorResponse) {
    let errorMessage = '';
    
    if (error.error instanceof ErrorEvent) {
      errorMessage = `Error: ${error.error.message}`;
    } else {
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    
    return throwError(() => new Error(errorMessage));
  }
}

import { Component } from '@angular/core';
import { UserService } from './user.service';
import { LoadingController, ToastController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html'
})
export class HomePage {
  users: User[] = [];
  isLoading = false;
  
  constructor(
    private userService: UserService,
    private loadingCtrl: LoadingController,
    private toastCtrl: ToastController
  ) {}
  
  async loadUsers() {
    this.isLoading = true;
    
    const loading = await this.loadingCtrl.create({
      message: '加载中...'
    });
    await loading.present();
    
    this.userService.getUsers().subscribe({
      next: (users) => {
        this.users = users;
        this.isLoading = false;
        loading.dismiss();
      },
      error: (error) => {
        this.isLoading = false;
        loading.dismiss();
        this.showError(error.message);
      }
    });
  }
  
  private async showError(message: string) {
    const toast = await this.toastCtrl.create({
      message,
      duration: 3000,
      color: 'danger'
    });
    await toast.present();
  }
}

// environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};

// environments/environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.example.com'
};

// 服务中使用
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private baseUrl = environment.apiUrl;
}

// models/user.model.ts
export interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string;
  createdAt?: Date;
  updatedAt?: Date;
}

export interface UserListResponse {
  data: User[];
  total: number;
  page: number;
  limit: number;
}

import { Component } from '@angular/core';
import { UserService } from './user.service';
import { Subject, takeUntil } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html'
})
export class HomePage implements OnDestroy {
  private destroy$ = new Subject<void>();
  
  constructor(private userService: UserService) {}
  
  loadUsers() {
    this.userService.getUsers()
      .pipe(takeUntil(this.destroy$))
      .subscribe(users => {
        this.users = users;
      });
  }
  
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}