使用程式設計人員-如何成為平均：Angular 執行擷取

由Ted Neward | 2017 年 10 月

Ted Neward 歡迎回來，MEANers。

我的最後一個資料行，我撰寫，"角度的應用程式的一般需求的其中一個是取得，或更新從位置不是在瀏覽器內的資料，這通常是每個地方。」我然後繼續進行而不會真的透過 HTTP 進行的任何項目移另一個幾幾千個字。

老實說，該資料行的目的是準備程式碼能夠從 HTTP API 中擷取資料放入角度服務內的 HTTP 要求程式碼。指定，我以往在查看之前角度服務點，我第一次所需之工作的角度服務的樣貌及其使用的各種元件，可能需要從基本技巧。還有，所有的使用左我沒有空間，以取得實際的目標：位於 HTTP API 端點中的資料。

就進行修正。讓我們移擷取一些資料。

喇叭應用程式開發介面

第一件事，我先我可以叫用與要求的 HTTP API。地方回復，舊的 MSDN Magazine 問題堆，最後我建置一年前的伺服器端 API 的版本。如果您確實要它，您會發現它是 API，可讓「人員」，不喇叭。令人讚嘆如何專案的目標可以"漂移」一段時間，對吧？

指定的簡單平均伺服器，然後只和之間的差異再現在會傳回物件的事實，我可以輕鬆地變更推播（定義於最後一個資料行）及制定喇叭物件的程式碼。但這麼做可表示錯過黃金得以指出東西： Node.js 社群具有的「平均堆疊架構」包括 Sails.js (sailsjs.com) 和一個我已在使用稱為回送 (strongloop.com)，和其他項目。多個這些架構是「建置」關閉我用一年前（Express、 MongoDB 等等）來建構結合項目在一起更緊密及繪製漂亮 veneer 頂端上方時，伺服器端 HTTP API 的相同工具。或者，您可以放在一起的 ASP.NET MVC Web 應用程式開發介面端點。伺服器端實作並不重要，只要它會隱藏 HTTP 後方。

第一件事是要了解 api 介面看起來像 — 若要使用，Url、預期的參數和傳回 JSON 回應格式與使用何種動詞哪些 Url。假設這是很簡單服務，所以可以輕鬆地假設它們看起來像，因此不需要正式這裡列出它們。(只在上，輸入 GET/上/喇叭/取得喇叭的喇叭的完整清單：識別碼擷取特定的喇叭，依此類推。)

SpeakerService

如果您還記得我的最後一個資料行，負責將資料擷取模組呼叫 SpeakerService。假設服務的重點是要改變了封裝擷取和儲存喇叭的詳細資料，您可以假設我即將顯示在這裡工作的絕大部分（如果不是所有）將會那里包含。

當我上次離開項目時，SpeakerService 會繪製從記憶體中常數的結果：

@Injectable()
export class SpeakerService {
  constructor() { }
  getSpeakers() : Array<Speaker> {
    return SPEAKERS;
  }
  getSpeaker(id: number) : Speaker {
    return SPEAKERS.find(speaker => speaker.id === id);
  }
}

提供更新和刪除功能，但現在讓我們能夠運作讀取作業最後需要的服務。請注意如何在每個案例中，"get"方法會傳回立即物件 — 演講者本身或喇叭的陣列。為記憶體中作業，這是很合理，但會透過 TCP/IP 堆疊進行的作業，它不是。網路作業花費的時間，並強制呼叫者等候網路作業直到完成 — 假設它不會把將產生不堪負荷放入開發人員建置的前端，因為現在前端必須以某種方式保留 UI 回應性而遭到封鎖等待回應。在過去，在其他 UI 平台，方案已經過能夠納入多個執行緒，強制 UI 開發人員，說明不一致的 UI。在 Node.js，不過，慣用的方法是要將回不實際的物件，但是會顯示一個承諾 — 最後。這些稱為，而定的承諾。

承諾的簡短概念是，它是一個預留位置，物件，在某個時間點，在未來保留所需的結果。但執行之前發生這種情況，可以向前繼續而不實際的結果。基本上，保證一定會是有需要，此值，將會產生回呼周圍包裝的物件稱為「解析程式」。（實際上，承諾會包裝約兩個這類的回呼，其他呼叫「 rejecter"，以防承諾無法滿足其義務。）

這是因為 HTTP 流量會由定義速度很慢，它 behooves 我之前至少模型服務，我將網路流量。承諾所提供的交換器結合兩秒延遲中傳回的資料就夠了正確地切割。圖 1顯示的已修改的程式碼。

圖 1 模型承諾預留位置的服務

@Injectable()
export class SpeakerService {
  constructor() { }
  getSpeakers(): Promise<Array<Speaker>> {
    return new Promise((resolve, reject) => {
      setTimeout( () => {
        resolve(SPEAKERS);
      }, 2000);
    });
  }
  getSpeaker(id: number): Promise<Speaker> {
    return new Promise((resolve, reject) => {
      setTimeout( () => {
      resolve(SPEAKERS.find(speaker => speaker.id === id));
      }, 2000);
    });
  }
}

這段程式碼模擬的網路延遲兩秒，然後才提供的資料，但無法擲回至混合時，選擇要呼叫的隨機失敗拒絕一次每 20 的呼叫，或讓，開發人員想要更緊密地模擬網路狀況。

Upvotes 等等

在元件端，範本和邏輯必須調整稍微接受承諾所提供，而不是實際的資料。實際更容易完成比雖如此，如下所示圖 2。

圖 2 使用喇叭值

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'SpeakerApp';
  speaker: Speaker = new Speaker();

  constructor(private speakerSvc: SpeakerService) {
    this.speakerSvc.getSpeaker(1).then( (data) => {
      this.speaker = data;
    });
  }
}

這裡發生兩個主要變更：首先，[喇叭] 欄位已初始化為空的喇叭值才會 Angular 先評估元件的範本時不一定要使用的喇叭物件。第二，建構函式會修改成使用傳回的承諾提供再方法呼叫，以接受由承諾交付的資料，請使用它。在此情況下，表示儲存到元件的喇叭] 欄位的建構函式。範本會維持不變，而"ng 做」可在背景中重新載入頁面會產生一些好奇仍在執行。[] 頁面上，卻 … for 兩秒 Upvote 元件的「投票」部分保持空白。然後將擷取的值隨即出現，完全如果魔術一樣。

這是一項承諾的好處，Angular 了解到的值變更時，需要重新轉譯的 DOM 已變更，且會自動該部分。多美哪！

喇叭、 O 喇叭其中你喇叭的封面？

但我仍在擷取資料儲存在本機。如何無趣。返回 SpeakerService 並透過 HTTP 執行呼叫的開始時間。這表示進行少數變更：匯入的 HttpModule （角度的小組選擇中斷"core"）、參考 HttpService，並使用於 SpeakerService 它。請注意，（當然） HttpService 會使用承諾，因此在使用 HttpService 很直接，做為 SpeakerService API 難以察覺的排班圖 3說明。

圖 3 使用 HttpService

@Injectable()
export class SpeakerService {
  private speakersUrl = "http://localhost:3000/api/Speakers";

  constructor(private http : Http) { }
  getSpeaker(id: number): Promise<Speaker> {
    return this.http.get(`${this.speakersUrl}/${id}`)
               .toPromise()
               .then(response => {
                  let raw: any = response.json();
                  let speaker = new Speaker();
                  speaker.firstName = raw.FirstName;
                  speaker.lastName = raw.LastName;
                  speaker.votes = new Upvote(raw.Votes);
                  speaker.id = raw.id;
                  return speaker;
               });
  }

當我將討論可預見值時，將會變成在未來的棋子，更清楚 toPromise 呼叫的原因。現在，這個呼叫是必要轉換用來做的承諾傳回的物件。請注意，進行中的程式碼圖 3工作是必要的多個匯入。若要匯入為了能保證方法，請務必將下列程式碼加入至檔案最上方：

匯入 ' rxjs/新增/運算子/toPromise ';

它可能看起來很奇怪，SpeakerService 「轉換」從 API 傳回的 JSON 本機的喇叭物件，但這是真的很常見的工作。發行應用程式開發介面的 JSON 不通常是相當多的權限"shape"以供在 UI，並且因此它必須一般到本機的概念說明項目類型應該看起來。在此案例中，我是假設服務傳回大寫的欄位與喇叭命名（較不尋常比您想像），並執行其他步驟，將「投票」欄位轉換成 Upvote 物件。雖然某些「完整堆疊」系統將會嘗試堅持有一個結構描述定義會在用戶端和伺服器之間共用，因此通常、更安全地假設，但不是，並執行「」資料調整接收將它轉換成 UI尋找更為可行。

在某些情況下，該「調整」是由前離開一定程度的資料，或「扁平化」它更容易使用，或一些其他轉換所組成。例如，如果伺服器會傳送回相異"喇叭」和「交談」物件，喇叭服務可能要「簡化」，我使用，所有的喇叭夠中每個 talk 投票收集成單一純量值的單一演講者物件。

請繼續進行，並儲存。假設您有連接埠 3000 在 localhost 上執行的伺服器，您應該會看到所有項目以使用 HTTP 翻轉之前一樣運作。(如果您沒有在 localhost 上執行的伺服器，可以自由至 SpeakerService 中變更 URL http://msdn-mean.azurewebsites.net/，這是我已在此貨車新整修的喇叭 API。瀏覽一組完整的 API 端點使用儘管"/ 總管」有 URL，如果您想-這 Swagger 產生 UI，可立即使用回送時。)

結論

HttpModule （和其相對應的服務物件，HTTP）確實可支援將和文章和所有其他健全度，提供了 HTTP，但一旦我新增了可編輯並加入新的喇叭角度的應用程式中會處理這些類型。就此而言，我還需要實質此前端詳細顯示所有喇叭的清單，然後讓使用者向下鑽研至特定的-傳統這麼多的應用程式使用的「主檔/明細」方法（和濫用）的位元。若要這樣做，請我必須討論 Angular 管理「路由」（以元件之間移動，就如同「頁面」應用程式中）與「表單」（適用於執行資料輸入）的方式。但是，必須等候下一次。在那之前...祝各位寫程式愉快！

Ted Neward是西雅圖 polytechnology 顧問、喇叭和指導，目前正在處理的開發人員關聯在主管為Smartsheet.com。他已寫入有大量的文件、撰寫及共同撰寫數十個書籍和世界各地的運作方式。連線到他處ted@tedneward.com或讀取在他的部落格blogs.tedneward.com。

非常感謝下列技術專家檢閱這篇文章：James Bender

MSDN Magazine 論壇中的這篇文章的討論

使用程式設計人員-如何成為平均：Angular 執行擷取

喇叭應用程式開發介面

SpeakerService

Upvotes 等等

喇叭、 O 喇叭其中你喇叭的封面？

結論

其他資源