有人可以解释 lambda/fat 箭头角函数调用的语法和含义吗

Question

有人可以帮我分解一下并解释语法和含义吗？我知道put$ 具有返回可观察对象的含义，因此它在公司服务中调用 put 并且它有两个参数，并且我知道 subscribe 是什么意思，但我需要一些帮助来理解它。

如果你有一个很好的教程的链接，那就太好了。

this.companyService.put$(this.currentId, this.appMenu.currentObject)
                   .subscribe(selectedCompany => {this.appMenu.currentObject = selectedCompany});

这是服务：

如果你也能解释一下“put”调用的语法，那也会很有帮助。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, BehaviorSubject } from 'rxjs';
import { Company } from '../models/company.model';

@Injectable({
  providedIn: 'root'
})
export class CompanyService {
  private url: string;

  constructor(private http: HttpClient) {
    this.url = "http://localhost:8080/niche/company";
  }

  getOne$ = (companyId: number): Observable<Company> => this.http.get<Company>(`${this.url}/${companyId}`);
  get$ = (): Observable<Company[]> => this.http.get<Company[]>(this.url);
  post$ = (company: Company): Observable<Company> => this.http.post<Company>(this.url, { company });
  patch$ = (companyId: number, company: Company): Observable<Company> => this.http.patch<Company>(`${this.url}/${companyId}`, { company });
  put$ = (companyId: number, company: Company): Observable<Company> => this.http.put<Company>(`${this.url}/${companyId}`, company );
  delete$ = (companyId: number): Observable<Company> => this.http.delete<Company>(`${this.url}/${companyId}`);
}

Answer 1

下面一行的意思是：

this.companyService
    .put$(this.currentId, this.appMenu.currentObject)
    .subscribe(selectedCompany => {
        this.appMenu.currentObject = selectedCompany
    });

如果你喜欢比喻：

银行里有一首诗 (database)，你的字帖里有这首诗的副本 (client application, in your case Angular application)。

但是，您想编辑字帖中的一些诗行和银行中的诗。

然后你打电话给银行账户官员 (this.companyService) 将你的行 (.put) 放入现有的诗歌 (this.currentId, this.appMenu.currentObject) 然后你正在等待银行账户官员 (.subscribe) 直到她/他更新银行里的诗。

更新：

As Angular doc says:

@angular/common/http 中的 HttpClient 提供了一个简化的客户端 HTTP 基于 XMLHttpRequest 的 Angular 应用程序 API 浏览器暴露的界面。 HttpClient 的其他好处 包括可测试性功能、类型化的请求和响应对象， 请求和响应拦截，Observable apis，精简 错误处理。

As MDN says:

XMLHttpRequest 或 XHR 是用于客户端和服务器之间通信的 javascript API。使用 XMLHttpRequest (XHR) 对象与服务器交互。您可以从 URL 无需进行整页刷新。这使网页 只更新页面的一部分而不破坏用户的身份 正在做。 XMLHttpRequest 在 AJAX 编程中被大量使用。

与其名称相反，XHR 可用于接收 JSON、HTML 和纯文本以及 XML。

还有一个使用示例：

// 1. Here we are creating a new XMLHttpRequest object
let xhr = new XMLHttpRequest();

// 2. Then we set its configuration: request of GET type for the URL /somePage/anotherPage
xhr.open('GET', '/somePage/anotherPage');

// 3. We are sending the request over the network
xhr.send();

// 4. Then this rows will be called after the response is received from the 
// server to the client
xhr.onload = function () {
    if (xhr.status != 200) { // see what HTTP status of the response is come
        alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
    } else { // show the result
        alert(`Great, got ${xhr.response.length} bytes`); // responseText is the server
    }
};

// Get progress from XMLHttpRequest
xhr.onprogress = function (event) {
    if (event.lengthComputable) {
        alert(`We are received ${event.loaded} of ${event.total} bytes`);
    } else {
        alert(`We are received ${event.loaded} bytes`); // no Content-Length
    }

};

xhr.onerror = function () {
    alert("Request failed");
};

所以HTTPClient 的subscribe 方法是XMLHttpRequest 的onload 方法。