Question

我发现angular2中有angular2 / http服务，但请与angular2分享最佳实践，因为过去有角度有$ http和$ resource的两种方式现在你应该明白我的意思了。

如果可能，请分享代码段。

Answer 1

想象一下具有两种资源的典型RESTful服务：

关于联系人列表的一个：/contacts/。您可以获取联系人列表（GET方法）或添加一个（POST方法）
特定联系人之一：/contacts/contactid。您可以获取联系人详细信息（GET方法），更新它（PUT或PATCH方法）或删除它（DELETE方法）。

以下是相应的服务：

@Injectable()
export class ContactService {
  baseUrl:string = 'http://...';

  constructor(private http:Http) {
  }

  getContacts() {
    return this.http.get(baseUrl + '/contacts/')
      .map(res => res.json());
  }

  addContacts(contact) {
    var payload = JSON.stringify(contact);

    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.get(baseUrl + '/contacts/', { headers })
      .map(res => res.json());
  }

  getContact(contactId) {
    return this.http.get(baseUrl + '/contacts/' + contactId)
      .map(res => res.json());
  }

  updateContacts(contact) {
    var payload = JSON.stringify(contact);

    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.put(baseUrl + '/contacts/' + contact.id, { headers })
      .map(res => res.json());
  }

  deleteContact(contactId) {
    return this.http.delete(baseUrl + '/contacts/' + contactId)
      .map(res => res.json());
  }
}

即使没有收到有效载荷，也不要忘记订阅。否则，将不会发送请求。

您可以根据需要使用catch运算符或订阅的错误回调来处理错误。

Answer 2

假设您已经为http导入了所有必需的文件，那么请读出这个答案

Using http rest apis with angular 2

首先，您必须使用装饰器i.r @Injectable()来装饰您的http服务类，并且有很多方法可以使用http但是因为我正在使用哪种方法，我在这里发布： -

要发布Post请求有时我们必须通过附加标题来发送autorization密钥，所以我们必须使用这样的标题： -

this.headers = new Headers();
this.headers.append("Content-Type", 'application/json');
this.headers.append("Authorization", 'Bearer ' + key)

您可以根据需要使用请求方法，即获取，发布，放置，删除。

这是使用http： -

的Post请求的简单示例

PostRequest（网址，数据）{ this.headers = new Headers（）; this.headers.append（“Content-Type”，'application / json'）; this.headers.append（“授权”，“承载”+ localStorage.getItem（'id_token'））

    this.requestoptions = new RequestOptions({
        method: RequestMethod.Post,
        url: url,
        headers: this.headers,
        body: JSON.stringify(data)
    })

    return this.http.request(new Request(this.requestoptions))
        .map((res: Response) => {
            if (res) {
                return [{ status: res.status, json: res.json() }]
            }
        });
}

获取请求的工作示例： -

Working Example of Get request

另见： -

Angular 2: How to use/import the http module?

Answer 3

服务的示例实现如下所示 -

@Injectable()
export class WebApiService {

    private _webApiUrl = 'http://localhost:3025/api/Employee';     
        constructor(private _http: Http) { 

        }

    getEmployees(): Observable<{}> {
        return this._http.get(this._webApiUrl)
            .map((response: Response) => <any[]> response.json())
             .do(data => console.log('All: ' +  JSON.stringify(data)))
             .catch(this.handleError)
            ;
    }

    getEmployee(id: number): Observable<IEmployees> {
        return this.getEmployees()
            .map((emp: IEmployees[]) => emp.find(p => p.ID_EMP === id));
    }

    private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }

}

看看这是否有帮助。

我们如何在angularjs 2中使用rest webservices？

3 个答案: