點擊上方藍字關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

為了滿足更多樣化的需求，前端的代碼隨之變的複雜起來，仔細想想，從渲染方式上來說：頁面渲染無非就是處理好數據與視圖之間的映射問題，傳統使用API直接操作DOM的方法變的繁瑣和必要隔離開來，所以出現了類似於React這樣的框架。從渲染速度上來說：JS代碼本身運行是不慢的，慢的是等待數據返回，伺服器響應的速度。然而，數據這部分前端是如何處理的。全篇列出了幾種處理方式

本篇內容實例：頁面載入時，按順序分別獲取三個介面（產品數據，用戶數據，評論數據）的數據。

一、Ajax

Ajax，這個很熟悉，JS兩種任務執行方式之一，非同步執行，實現上面功能可以這麼寫：

先封裝一個非同步操作函數（XMLHttpRequest）-ajaxFun

然後直接調用ajaxFun，在回調函數里調用下一個介面數據，代碼是這樣寫的：

運行結果是這樣的

我曾經對這個方法的總結是：層層嵌套總是不夠完美。

二、Promise

Promise，可以理解為代理，充當非同步操作與回調函數之間的中介，簡單的說是：每一個非同步任務立刻返回一個Promise對象，Promise對象有一個then方法，允許指定回調函數，在非同步任務完成後來調用。總的來說，Promise對象最大的作用就是解決了非同步回調函數層層嵌套的問題。

看一下Promise是如何實現上面功能的：

如上圖，首先將ajaxFun非同步任務封裝成返回一個Promise對象，然後在直接調用它，在then方法中做回調處理。運行結果：

顯然和上面使用Ajax方法是一樣的。

三、Generators

Generators也是ES6一個新的特性，能夠暫停或者執行代碼，yield表示暫停，iterator.next表示執行下一步。

具體實現代碼如下：

運行的結果和上面使用Ajax方法是一樣的。

四、await/async

await/async可以說是目前最簡單的非同步處理方式了。

同樣也是先封裝一個Promise函數，async表示這是一個async函數，await只能用在這個函數裡面。await表示在這裡等待Promise返回結果了，再繼續執行。具體實現是這樣的：

運行結果和上面使用Ajax方法是一樣的。

總結：

這篇文章簡單列了一下4種獲取數據方法的使用，對於使用框架來開發你的項目的時候，處理前後端分離的時候，這是很重要的一塊。關於獲取數據還可以往深的總結，這不是最後一篇，後面待續。本篇實例下載地址：https://github.com/wenpingzheng/React_Getdata.git

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！