angular5如何发送请求到远程服务器？详细步骤是怎样的？

在Angular5开发中，与远程服务器进行数据交互是常见需求，主要通过HTTP请求实现，Angular5内置了@angular/http模块，提供了强大的HTTP客户端功能，支持GET、POST、PUT、DELETE等多种请求方法，本文将详细介绍如何使用Angular5发送请求到远程服务器，包括环境配置、请求发送、响应处理、错误处理及拦截器等关键环节。

环境配置与模块引入

在开始发送请求前，需确保项目已正确配置HTTP服务，在app.module.ts或相关功能模块中导入HttpModule和JsonpModule（如需JSONP请求）：

import { HttpModule } from '@angular/http';
import { JsonpModule } from '@angular/http';
@NgModule({
  imports: [
    // 其他模块
    HttpModule,
    JsonpModule
  ]
})
export class AppModule { }

若使用Angular CLI创建项目，默认已包含@angular/http依赖，若未安装，可通过npm install @angular/http --save命令添加。

发送GET请求

GET请求用于从服务器获取数据，在组件或服务中注入Http服务，然后调用get()方法并传入目标URL,以下为组件中发送GET请求的示例：

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
@Component({
  selector: 'app-user-list',
  template: `<ul *ngIf="users"><li *ngFor="let user of users">{{user.name}}</li></ul>`
})
export class UserListComponent implements OnInit {
  users: any[];
  constructor(private http: Http) {}
  ngOnInit() {
    this.http.get('https://api.example.com/users')
      .subscribe(
        response => {
          this.users = response.json().data; // 解析JSON响应
        },
        error => {
          console.error('Error fetching users:', error);
        }
      );
  }
}

说明：

• http.get()返回一个Observable对象，需通过subscribe()方法订阅以接收响应。
• response.json()用于将响应体解析为JSON对象（Angular5默认不自动解析，需手动调用）。
• 建议将HTTP请求逻辑封装在服务中,以实现关注点分离和可复用性。

发送POST/PUT/DELETE请求

POST、PUT、DELETE请求用于提交、修改或删除数据，需在请求头中设置Content-Type为application/json，并通过map或toPromise处理请求体,以下为服务中发送POST请求的示例：

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class UserService {
  private apiUrl = 'https://api.example.com/users';
  constructor(private http: Http) {}
  createUser(user: any): Observable<any> {
    const headers = new Headers({ 'Content-Type': 'application/json' });
    const options = new RequestOptions({ headers });
    return this.http.post(this.apiUrl, user, options)
      .map(response => response.json())
      .catch(this.handleError);
  }
  private handleError(error: any): Observable<any> {
    console.error('An error occurred:', error);
    return Observable.throw(error.message || error);
  }
}

关键点：

• Headers和RequestOptions用于设置请求头和请求选项。
• POST请求的第二个参数为请求体（需序列化为JSON字符串）。
• 使用map操作符处理响应，catch捕获错误。

响应处理与数据转换

Angular5的HTTP响应是一个Response对象，包含多种属性：

• json()：解析响应体为JSON对象。
• text()：获取响应文本。
• blob()：获取二进制数据。

常见处理方式：

1. 直接订阅（如GET请求示例）。
2. 使用toPromise：将Observable转为Promise，便于异步操作：

   this.http.get(this.apiUrl).toPromise()
     .then(response => response.json())
     .catch(error => console.error(error));

错误处理

完善的错误处理机制对应用稳定性至关重要，可通过以下方式处理错误：

1. 全局错误拦截：使用HTTP拦截器（需自定义HttpInterceptor接口，Angular5需手动实现）。
2. 请求级错误处理：在subscribe()的第二个回调或catch中处理：

   this.http.get(url).subscribe(
     data => console.log(data),
     error => {
       if (error.status === 404) {
         console.error('Resource not found');
       } else {
         console.error('Server error');
       }
     }
   );

请求拦截器

Angular5未直接提供拦截器，但可通过继承BaseRequestOptions或拦截Http服务实现,以下为自定义拦截器的示例：

import { Injectable } from '@angular/core';
import { Http, BaseRequestOptions, RequestOptionsArgs } from '@angular/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class CustomHttp extends Http {
  constructor(private _backend: any, private _defaultOptions: BaseRequestOptions) {
    super(_backend, _defaultOptions);
  }
  request(url: string | Request, options?: RequestOptionsArgs): Observable<any> {
    // 添加全局请求头
    if (typeof url === 'string') {
      url = this._defaultOptions.merge(options || {}).url;
    }
    return super.request(url, options);
  }
}

在app.module.ts中提供自定义Http实例：

import { HttpModule, BaseRequestOptions } from '@angular/http';
import { CustomHttp } from './custom-http';
@NgModule({
  providers: [
    { provide: Http, useClass: CustomHttp },
    { provide: BaseRequestOptions, useClass: CustomRequestOptions }
  ]
})

跨域请求处理

开发时若遇到跨域问题，需确保服务器端配置了CORS头（如Access-Control-Allow-Origin），若服务器未支持，可通过代理解决：

1. 在package.json中添加代理配置：

   "proxy": "https://api.example.com"

2. 请求时使用相对路径：this.http.get('/users')。

性能优化建议

1. 请求缓存：对频繁请求且数据变化不频繁的接口（如配置信息），可使用shareReplay操作符缓存响应。
2. 取消请求：通过Observable的unsubscribe()方法取消未完成的请求。
3. 懒加载模块：仅在需要时加载HTTP相关模块,减少初始包体积。

安全注意事项

1. HTTPS：生产环境务必使用HTTPS协议，防止数据泄露。
2. 输入验证：对用户输入进行严格校验，防止XSS攻击。
3. 敏感信息：避免在URL或请求头中直接传递敏感数据（如token），建议使用Authorization头。

通过以上方法，可高效、安全地实现Angular5应用与远程服务器的数据交互，实际开发中，建议结合RxJS操作符灵活处理异步流，并遵循RESTful API设计规范,以构建健壮的前端应用。