<p>号外号外：本篇文章主要使用了ES6箭头函数，如果不熟悉的同学建议看一看。嘻嘻</p>
<p>开篇之前先理清下面几个问题</p>
<p>Promise的构造函数参数可以传递什么类型？除了使用Promise构造函数进行链式调用外，Promise还有什么方式进行链式调用吗？</p>
<p>Promise.resolve（）的参数可以传递什么类型的数据？不同类型的数据产生怎样的结果？</p>
<p>Promise的构造函数中调用resolve()/reject()这样做的目的是什么？</p>
<p>Promise的then方法是做什么的？</p>
<p>如何终止链式调用？（这个场景会在什么时候遇到）</p>
<p>如何把promise的代码转化为async await的调用方式</p>
<p>进阶：手写Promise（哈哈 是不是有点招人恨的样子...）</p>
<p> </p>
<p>从第一个问题开始：Promise的构造函数参数必须是函数，函数有两个参数一个是resolve，一个是reject。除了Promise构造函数进行链式调用外，Promise.resolve（）也可以进行链式调用，不过他的参数多数是基本数据类型会进行值穿透。</p>
<p>第二个问题：Promise.resolve（）的参数是基本数据类型，会导致值传递</p>
<p>第三个问题：Promise的构造函数中调用resolve()/reject()这样做的目的是触发then的回调函数（resolve调用成功的回调，reject调用失败的回调）并且修改Promise的状态。状态有pending 转化为fulfilled或者rejected。</p>
<p>第四个问题：Promise的then方法可以返回上一个Promise的回到结果，也可以return一个新的Promise，从而实现链式调用</p>
<p>第五个问题：then返回一个空的Promise对象即可</p>
<p>第六个问题：</p>
<p>第七个问题：</p>
<h2 id="5X8Vz">为什么使用promise</h2>
<p>解决回调地狱的代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象 。其次promise可以支持多个并发的请求，获取并发请求中的数据</p>
<p> </p>
<p>常规回调方式实现：</p>
<pre class="blockcode">setTimeout(() => {
console.log('1');
setTimeout(() => {
console.log('2');
setTimeout(() => {
console.log('3');
setTimeout(() => {
console.log('4');
}, 1000);
}, 1000);
}, 1000);
}, 1000);</pre>
<p>promise方式实现：</p>
<pre class="blockcode">function getStr1() {
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve('1');
}, 1000);
});
}
function getStr2() {
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve('2');
}, 1000);
});
}
function getStr3() {
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve('3');
}, 1000);
});
}
function getStr4() {
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve('4');
}, 1000);
});
}
getStr1().then((data) => {
console.log(data);
return getStr2();
}).then((data) => {
console.log(data);
return getStr3();
}).then((data) => {
console.log(data);
return getStr4();
}).then((data) => {
console.log(data);
})</pre>
<p>如果我们使用Promise去实现这个效果，虽然代码量不会减少，甚至更多，但是却大大增强了其可读性和可维护性</p>
<h2 id="4CN06">解密Promise核心</h2>
<p>通过上面几个问题能感受到Promise更像一个保存状态的魔法罐，只要状态改变就可以就能一直传递下去，并且状态持久的保存在自己身上，随时都可以then函数的调用。其次状态是不可逆的，只能从pending 转化为fulfilled或者rejected。总结一句话就是状态就是Promise的灵魂所在，状态使用resolve或者reject管理的。接下来通过几个例子来理解Promise</p>
<p>例一：</p>
<p>首先需要知道Promise 构造函数是同步执行的，<code>promise.then</code> 中的函数是异步执行的，方便下面工作进行</p>
<pre class="blockcode"> let promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success')
}, 3000)
})
promise.then((data) => {
console.log(data)
console.log('resolved===', promise)
})
console.log('pengding====', promise)</pre>
<p>输出结果：</p>
<p><img alt="image.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-336e5210a051dd1f4ef197e26719903e"></p>
<p>如果我这里把resolve('success')注释掉会发生什么事情呢？有的同学会说then函数不再往下执行，恭喜你答对了，给你一个大大的赞！！！</p>
<p><img alt="image.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289 |
|
转播
