>[danger]什么是Promise 1. 它是异步操作的一个解决方案, 简单说它就是一个异步操作的容器, 在未来某一个时刻会完成的操作 2. Promise是一个构造函数, 它身上有resolve和reject方法, 原型上有then和catch方法 3. 它只有三种状态, pending(运行中) fulfilled(成功), rejected(失败) ******* 扩展: 1. Ajax请求回调太多, 形成回调地狱, 可以配合Promise替代回调函数, 但是Promise本身又是链式调用then, 会形成很多的链式回调, 代码也不太方便阅读 2. 我们可以使用ES7中的Async+Await把请求变为同步请求. 3. 每次调用then, 会返回一个新的Promise对象, 而且return的值会作为下一次then的参数 4. then() 接收resolve / catch() 接收reject / finally 无论如何都执行 ******* >[danger]Promise.all() --- 用于把多个Promise对象, 合并成一个, 如何有一个失败, 直接进入catch, 如果子Promise自己实现了catch, 则合并的Promise对象不会进入catch, 进入then ~~~ Promise.all([p1, p2, p3]); ~~~ >[danger]Promise.resolve() --- 用于将对象转成Promise对象 ~~~javascript Promise.resolve('foo') // 返回一个Promise对象 // 等价于 new Promise(resolve => resolve('foo')) ~~~ >[danger]手写Promise实现 1. Promise雏形, 先理解这个 ``` // 1. 声明Promise, fn就是你在new Promise传入的方法体 function Promise(fn) { var value = null; var callbacks = []; //callbacks为数组，因为可能同时有很多个回调 // 接收外面.then时传入进来的回调函数 this.then = function (onFulfilled) { // 加入到callbacks数组中 callbacks.push(onFulfilled); }; // 当promise内部调用resolve方法时, 将.then传入进来的回调函数全部执行一遍 function resolve(value) { callbacks.forEach(function (callback) { callback(value); // 把value值带出去, 带到then注册的方法参数中 }); } fn(resolve); // 调用new Promise时, 传入的方法体, 开始执行了 } ``` 2. 调用promise时, 发现resolve方法马上同步执行了, 所以还没等then调用呢. ``` function getUserId() { return new Promise(function (resolve) { resolve(9876); }); } // 2. 调用方法, 得到Promise对象. 调用then注册回调函数 getUserId().then(function (id) { console.log(id); // 我们发现什么也没有打印, 证明resolve先执行了, 而then还没调用.所以这里没有回调成功 }); ``` 3. 让resolve里等待主线程执行完毕它再执行, 改装代码 ``` function reso(value) { setTimeout(function(){ callbacks.forEach(function (callback) { callback(value); // 把value值带出去, 带到then注册的方法参数中 }); }, 0); } ``` 4. 如果失败的话怎么处理呢? (最简单, 最终版, 还不能实现太复杂功能) ``` // 1. 声明Promise, fn就是你在new Promise传入的方法体 function Promise(fn) { var value = null; var callbacks = []; //callbacks为数组，因为可能同时有很多个回调 // 接收外面.then时传入进来的回调函数 this.then = function (onFulfilled, onRejected) { // 加入到callbacks数组中 (注意这里分成功, 失败情况) callbacks.push({ "onFulfilled": onFulfilled, "onRejected": onRejected }); }; // 当promise内部调用resolve方法时, 将.then传入进来的回调函数全部执行一遍 function resolve(value) { execute("onFulfilled", value); } function reject(value) { execute("onRejected", value); } function execute(key, value) { setTimeout(function () { callbacks.forEach(function (callbackObj) { callbackObj[key](value); // 把value值带出去, 带到then注册的方法参数中 }); }, 0); } fn(resolve, reject); // 调用new Promise时, 传入的方法体, 开始执行了 } function getUserId() { return new Promise(function (resolve, reject) { resolve(9876); setTimeout(function () { reject("失败"); }, 2000); }); } getUserId().then(function (id) { console.log(id); }, function (err) { console.log(err); }) ```