CallBack 回调函数是 JS 的特色之一, 但 CallBack 回调方法, 非常容易造成回调地狱 (callback hell), 回调地狱不仅形象丑陋, 而且代码难以维护
以 Node.JS 读取文件为例
- const fs = require("fs");
- // 回调函数的方式
- fs.readFile('./zhaoolee.txt', (err, data)=>{
- if (err) {
- console.log(err);
- }else{
- let result = data.toString("utf8");
- console.log("CallBack 方式读到的内容为 ==>>", result);
- }
- })
啥是回调函数?
我们可以把回调函数看做是快递小哥 (回调函数 = 快递小哥)
把互联网看做是遍布全球的快递系统 (互联网 = 快递系统)
把网页数据看做是快递包裹 (网页数据 = 快递包裹)
某天购物狂欢节, 你买了 200 件, 200 件快递来自全国各地, 发往你在深圳的家, 为了节省快递成本, 快递小哥会等待 200 件快递全部到达网点后, 再开着小车一起送货
把上面的送货策略抽象一下, 200 件快递全部到达网点是事件 A, 开着小车一起送货是事件 B, 只有当事件 A(200 件快递全部到达网点) 达成时, 才会进行事件 B(开着小车一起送货), 事件 B(开着小车一起送货) 就是事件 A(200 件快递全部到达网点) 的回调函数
用 Promise 改写上面的 CallBack 代码
- const fs = require("fs");
- // Promise 的方式
- async function myReadFile (){
- let result = await new Promise((resolve, reject)=>{
- fs.readFile('./zhaoolee.txt', (err, data)=>{
- resolve(data.toString("utf8"))
- })
- })
- console.log("Promise 方式读到的内容为 ==>", result);
- }
- myReadFile();
上面代码出现了 await 和 async 两个词,
await 是等待这一步完成后, 获得结果, 才能执行下一步
async 用于修饰函数, 如果函数内部出现了 await 关键词, 函数前面必须添加 async, 这是语法~
执行结果
本文章相关代码已经托管到 GitHub, 代码地址: https://github.com/zhaoolee/GBlog/tree/master/Resource/callback_to_promise
来源: http://www.jianshu.com/p/5ed426dc8dca