首先建议大家先看看这篇博文，这是我看过的最清晰给力的博文了：
附赠一篇笑死我了的博客,加入有一天 V8引擎重大故障，为了拯救JavaScript世界...
Promise 是ES6中最重要的特性？
确实如此。让回调更加优雅。
我的第一家公司用 jQuery，第二家公司用 async/await，第三家公司使用 jQuery 和 Promise。
比较而言，我还是最喜欢 使用 async/await，不过当时也有很多别人写的UI组件，用的是 Promise，想想，出的比ES6早，在ES6被官方认证，使用者应该还是占上风的。
1.Promise有啥方法？
看一下上面的博文，通过 consle.dir(Promise) -> Promise 是一个构造函数。
-
自身拥有的方法
- all (取时间最长的)
- reject
- resolve
- race (竞赛，取时间最短的)
-
原型链上的方法
- catch -> async/await 中需要直接用 try .. catch 来是想，算是 ES6 优胜的一点了
- then -> 不用 callback，像 jQuery 的 always/fail/done/then
既然原型链上有方法，那么 new 出来，就能够获得这些方法
let p = new Promise((resolve, reject) => {
// 一些异步操作
setTimeout(() => {
console.log('执行完成');
resolve('将数据遗留给后人');
}, 1000);
});
可以看到，这里的 函数直接自己执行了！！！ 我们只是定义了一个对象，确是自己执行。
2.Promise 如何使用？
So，我们需要在它外面封装一层函数。
const Invoke = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('执行完成');
resolve({name: 'Jobs'});
}, 2000);
});
};
Invoke();
通过 Invoke 函数，我们实现了 它的该出手时就出手。
接下来，体验一下 不用 callback 地薪火相传。 无限回调地狱，再见啦。
Invoke().then((data) => {
console.log(data);
});
用 callback 实现一下
const fuckPromise = (callback) => {
setTimeout(() => {
console.log('先实现一个小目标');
callback({name: 'Jobs'});
}, 1000);
};
fuckPromise((data) => {
console.log(data);
});
对比一下： 我将他们分为 前置操作 和 后续操作。
相同点
- 两者的 后续操作，都作为参数被传递
不同点
- Promise 前置操作 中返回了一个对象，并且其中有， resolve/reject 来控制数据的传递。
- Callback 前置操作 中则是 在内部调用了 方法参数。把数据完全交给 callback 来控制。
- Promise 的后续操作，使用
Promise.then()写在里面 - Callback 的后续操作，使用
外部函数(内部函数)
当层级一多，前者就是一堆 then，而后者？？？ 举个例子！！
3.从 callback 到 Promise.
Callback 版本1，当回调更多的时候，我们就能 很明显地感受到 还好我没用4格缩进
let fuckCallback = () => {
setTimeout(() => {
console.log('峰哥峰哥,');
setTimeout(() => {
console.log('影魔王');
}, 1000);
}, 1000);
}
fuckCallback();
Callback 版本2: 封装一下，缩进代码确实没有那么乱了，不过数据量大的时候还是不够 直观。
let callbackOne = (callback) => {
setTimeout(() => {
console.log('峰哥峰哥');
callback();
}, 1000);
};
let callbackTwo = (callback) => {
setTimeout(() => {
console.log('峰哥牛逼');
callback();
}, 1000);
};
callbackOne(() => {
callbackTwo(() => {
console.log('也许我是下一个操作');
});
});
Promise 版本: 代码没有往后延了，是的，这就是 Promise 的作用。看起来好像没卵用？只是量不够大而已。
const stepOne = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve('峰哥峰哥,');
}, 1000);
});
};
const stepTwo = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve('影魔王！');
}, 1000);
});
};
stepOne()
.then((data) => {
console.log(data);
return stepTwo();
})
.then((data) => {
console.log(data);
});
这里，我发现了一点，其实 Promise 并不关系你如何处理数据，你一开始，只需要负责，把Promise这个传承的能力执行下去就行了。
让我想起《我的英雄学院》这个动画里。 One for All 的能力，只需要传承即可。传承什么力量由当代决定。
4.Promise 的其他用法
- 直接 return 数据会怎么样？
let wrap = () => {
return new Promise(resolve => {
resolve({name: 'jobs'});
});
};
wrap()
.then(data => {
console.log(data);
return data;
})
.then(data => {
console.log('我再传', data);
});
- reject 和 catch 的用法
let testReject = () => {
return new Promise((resolve, reject) => {
const head = Math.random();
if (head > 0.5) {
reject('yyf头太大了');
} else {
resolve('千军万马避蓝猫');
}
});
}
testReject()
.then(data => console.dir(data))
.catch(e => console.error(e));
- all 的用法 (两者之中取 执行时间最长的那个 --> 同时执行,一般用来节省请求的时间)
let p1 = () => {
return new Promise((resolve) => {
setTimeout(() => {
console.log('我会执行两秒钟');
resolve();
}, 2000);
});
};
let p2 = () => {
return new Promise((resolve) => {
setTimeout(() => {
console.log('我会执行一秒钟');
resolve();
}, 1000);
});
};
Promise
.all([p1(), p2()])
.then(() => console.log('他们都 resolve了，共计时 2s'));
切记： Promise.all([arg1,arg2,...]) 是等里面 都 resolve() 才返回。
没有 resolve 参数，那是不行的。 你会发现 promise.all.then 失效了。
- race -> 竞赛，第一个 resolve 了，则进行 then 操作，第二个还是会继续执行就是了
Promise
.race([p1(), p2()])
.then(() => console.log('看看过了几秒？'));
总结：(引用了开篇的那个文章，抄那边的)
ES6 Promise的内容就这些吗？是的，能用到的基本就这些。
我怎么还见过done、finally、success、fail等，这些是啥？这些并不在Promise标准中，而是我们自己实现的语法糖
需要继续跟进一下最顶上链接的 博客。
- Promise/A+规范
- jquery中的Promise
补充一个工作中用到的 Promise，书到用时方恨少啊
需求是这样的：
1.首先这是两个请求，同时发送的请求，互相并不依赖
2.当请求A返回的是 失败、且为没有资源(404) ，则进行操作 a
3.当请求B返回的是 失败、且没有资源(404)，则进行操作 b
4.当请求A、B 返回的都是 失败、且没有资源(404)，则进行操作 c
用 Promise.all 实现，代码尽量漂亮(雾)
我是怎么做的呢？工作中，我并没有实现它，因为当时环境出了问题，自己的技术更是有问题，于是我放在这里 写吧。(叹气一口、唉)
1.我先去 easy-mock 创建了两个请求必须的接口
总不能老是使用 setTimeout，有种纸上谈兵的感觉.
Easy-mock 的配置，均为 get 请求.
{
"success|1": true,
"errcode": /40[2-5]/,
"message": "I'm the one."
}
{
"success|1": true,
"errcode": /40[48]/,
"message": "I'm data2"
}
2.本地采用 fetch 的异步获取方式。越来越多的浏览器支持 fetch 了。
fetch('https://www.easy-mock.com/mock/5ae316f1e671403cb1da46af/example/data2');
简单地来说就是这么一句话 - 发了个请求。
让我们看看这个网站是怎么介绍的？
Ajax已死，Fetch永生
可以不用看啦，一次还是只专注一个知识点就好(==)，看下 fetch 的使用结构就好了 -> 返回了一个 Promise
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function(e) {
console.log("Oops, error");
});
万事俱备、只欠东风。东风在下面 - -
fetch('https://www.easy-mock.com/mock/5ae316f1e671403cb1da46af/example/data2')
.then(res => res.json())
.then(data => console.log(data));
如果你按照我的教程没有成功。。。那么说明:
- 你可能需要在 easy-mock 那个官网上 稍微看看，如果那边的预览没毛病，那看下一点
- 浏览器 console 一下 fetch 看一下有没有东西， 确认下，再看下一点
- 代码写错没？老铁！！！
3.接下来，我们就可以完成我们的需求了。使用 Promise.all.想了想，还是先练习一下。
练习版本: 突然发现好简单，之前主要疑惑的地方还是在 all 方法怎么传递数据的地方。
当我明白了 all 之后的回调里，自带 resolve 里面的数据的时候，就觉得好简单了。
let arr = [404, 200];
let p1 = () => new Promise((resolve, reject) => {
setTimeout(() => {
let index = Math.round(Math.random());
let res = arr[index];
console.log('2秒后,res1:', res);
if (res === 404) {
resolve(404);
} else if (res === 200) {
resolve();
}
}, 2000);
});
let p2 = () => new Promise((resolve, reject) => {
setTimeout(() => {
let index = Math.round(Math.random());
let res = arr[index];
console.log('3秒后, res2:', res);
if (res = 404) {
resolve(404);
} else if (res === 200) {
resolve();
}
}, 3000);
});
Promise.all([p1(), p2()])
.then((data) => {
console.log(data);
})
.catch(() => {});
实战版本: 还是比较不一样的，我在这里请求了百度并且出错了，所以需要注意 resolve 不必要的判断(如果你的逻辑是这样的话，这是前提)。
let p1 = () => new Promise((resolve, reject) => {
fetch('https://www.easy-mock.com/mock/5ae316f1e671403cb1da46af/example/data2')
.then(res => res.json())
.then(data => resolve(data && data.errcode || null))
.catch(() => resolve());
});
let p2 = () => new Promise((resolve, reject) => {
fetch('https://www.easy-mock.com/mock/5ae316f1e671403cb1da46af/example/data')
.then(res => res.json())
.then(data => resolve(data && data.errcode || null))
.catch(() => resolve());
});
Promise.all([p1(), p2()])
.then((data) => {
console.log(data);
if (data[0] === 404 || data[1] === 404) {
console.log('服务器资源不存在的逻辑');
} else {
return;
}
});
// 注意，不要在最后的 all 里再判断 catch，比较好的方式 应该是在 p1/p2 就判断好。
补充一个描述中的模仿 Promise 的结构. --- 所谓的组合构造模式，没想到在这里也遇见了。
function Promise(excutor) {
this.PromiseStatus; // 共有三种状态 pending/fulfilled/rejected(等待/完成/拒绝 状态)
this.PromiseValue; // 用于存储数据
var resolve = function(res) {};// 闭包函数
var reject = function(res) {}; // 闭包函数
executor(resolve, reject); // new 一个新的 Promise 会传递一件你需要做的事情
}
Promise.prototype.then = function() {};
Promise.prototype.catch = function() {};
Promise.prototype.chain = function() {};
上面的这个，有助于我们 理解 Promise，跟在 Chrome 打出来的东西实质上是一样的。
各种方法的 Polyfill/源码
因为自己在看 Promise.all 方法的 polyfill 的时候遇见了些困难，这些摘抄下网上关键的提示 --- Promise.all 的特点
- 接受一个 iterator 参数(可迭代的迭代器)
- 如果元素不是 Promise 格式的，则通过 Promise.resolve 转化弄成 Promise
非我族类，必存异心
- 如果全部成功，状态变为 resolve，返回值组成一个数组传递给回调
- 只要有一个失败，返回值将直接回调
其实，就我当前的了解：其实所谓的 Promise.all 就是 给外层 多加了一层 Promise
人民的统一，需要一个共同的 人/机构。 Promise 不外如此。
终于看懂了官网的 Promise.all，一些注释的记录。
let p1 = () => new Promise((resolve, reject) => {
fetch('https://www.easy-mock.com/mock/5ae316f1e671403cb1da46af/example/data')
.then(res => res.json())
.then(data => console.log(data))
.catch(e => console.log(e));
});
let p2 = () => new Promise((resolve, reject) => {
fetch('https://www.easy-mock.com/mock/5ae316f1e671403cb1da46af/example/data2')
.then(res => res.json())
.then(data => console.log(data))
.catch(e => console.log(e));
});
// polyfill start
Promise.all = function(arr) {
var args = Array.prototype.slice.call(arr);
return new Promise(function (resolve, reject) {
// 若传进来的数组为 0
if (args.length === 0) return resolve([]);
// 这里出现了计数的 数组长度 - 所有的 Promise 长度
var remaining = args.length;
function res(i, val) {
// 某种程度上，说明了 val 是一个Promise对象
if (val && (typeof val === 'object')) {
var then = val.then;
// 确认一下是不是 promise 中的 then 函数
if (typeof then === 'function') {
var p = new Promise(then.bind(val));
p.then(function(val) {
res(i, val);
}, reject);
return;
}
}
// 跳到这里来的有两种：
// A.不是Promise对象，直接跳过来
// B.执行过后的Promise对象，Promise要在上面的地方多执行一次,返回来的数据就是
args[i] = val;
if (--remaining === 0) {
// 这里就是结果数组了吧
resolve(args);
}
}
for(var i = 0; i < args.length; i++) {
res(i, args[i]);
}
})
}
Promise.all([p1(), p2()])
.then();