## 異步編程 想要學習promise，你必須要懂得什么是異步編程！眾所周知，js語言是單線程機制。所謂單線程就是按次序執行，執行完一個任務再執行下一個。但是不影響存在同步和異步的兩種操作，這兩種操作做事情其實都是在一條流水線上(單線程)，只是這兩種操作在單線程上的執行順序不一樣罷了！當js觸發到異步任務時，會將異步任務交給瀏覽器處理，當執行有結果時，會把異步任務的回調函數插入待處理隊列的隊尾！ 我們通俗的去解釋一下我們的異步：異步就是從主線程發射一個子線程來完成任務，每一個任務有一個或多個回調函數（callback），前一個任務結束后，不是執行后一個任務，而是執行回調函數，后一個任務則是不等前一個任務結束就執行，所以程序的執行順序與任務的排列順序是不一致的、異步的 ``` function getData(callback) { setTimeout( () => { console.log("獲取數據") callback("data"); } , 1000) } function processData(data, callback) { setTimeout( () => { console.log("處理數據：" + data) callback(data.toUpperCase()); } , 1000) } function displayData(data, callback) { setTimeout( () => { console.log("顯示數據：" + data) callback(data); } , 1000) } //執行方法 getData((data) => { processData(data, (processData) => { displayData(processData, () => { console.log("操作完成") }) }) }); ``` 結果： ## 使用Promise優化 ``` function getData() { return new Promise((resolve, reject) => { setTimeout(() => { console.log("獲取數據") resolve("data"); }, 1000) }) } function processData(data) { return new Promise((resolve, reject) => { setTimeout(() => { console.log("處理數據：" + data) resolve(data.toUpperCase()) }); }) } function displayData(data) { return new Promise((resolve, reject) => { setTimeout(() => { console.log("顯示數據：" + data) resolve(); }); }) } // 監頭函數中，如果不加大括號并且只有一行代碼，默認會return，如果加了則沒有return，會返回undefined getData() .then((data) => processData(data)) .then((processData) => displayData(processData)) .then(() => { console.log("操作完成") }) .catch((error) => console.error(error)) // 缺點：回調太多，閱讀困難 // 期望： /* const data = getData(); const processData = processData(data); displayData(processData); console.log("操作完成"); */ // 想要異步方法寫成同步方法，可以使用async/await語法糖處理 async function main() { try { const data = await getData(); const processData1 = await processData(data); await displayData(processData1); console.log("操作完成"); } catch (e) { console.error(e) } } main(); ``` 結果：