前幾天面試web前端工作，被一道題問蒙了，面試官問React中setState的非同步更新如何控制為同步更新，當時懵的一批，畢竟面的第一家前端，心裡感覺本來就是非同步，怎麼會改成同步，這不扯呢嗎，事後才發現這件事無非就是一個非同步的協同問題，平時看了很多關於es6的Promise,async/await的語法，到關鍵時候還是沒用上，究其原因還是平時程式碼用的少。下面針對這個問題再複習一遍es6的知識。

首先說一下Promise物件，Promise即為承諾的意思，初始化Promise物件會傳入一個函式，此函式兩個引數分別是resolve和reject，resolve代表成功，reject代表失敗。詳細的請看阮一峰的es6相關知識，講的很詳細。

var promise = new Promise(function(resolve, reject) {
    // ... some code

    if (/* 非同步操作成功 */){
        resolve(value);
    } else {
        reject(error);
    }
});

然後再順便講一下async/await的用法，主要就是使得非同步操作變得更加簡單，async代表非同步，await會返回一個Promise物件，可以說使得非同步變成同步。同樣，詳細的可以檢視阮一峰的es6。

async function f() {
  await test();//hellow
}

function test(){
    return 'hellow';
}
 

下面開始進入主題，其實懂得上面的兩個語法，就沒什麼難的。

async componentDidMount(){
       await this.setStateAsync([{key:0,id:0,name:'sa',code:'44',width:'44',height:'44'}]);
       console.log('action');
    }

    setStateAsync(state){
        return new Promise((resolve => {
            console.log('1');
            this.setState({dataSource:state},resolve(1));
        }))
    }
 

因為setState是非同步的，所以放在返回的Promise物件中，然後更新完後之後呼叫resolve，在componentDidMount中await就可以了，這樣就保證了更新介面的同步性。