## 异步编程 想要学习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(); ``` 结果：