一 前期概念准备
1.1 区别实例对象与函数对象
1，实例对象：new函数产生的对象，称为实例对象，简称为对象；
2，函数对象：将函数作为对象使用时，简称为函数对象；
function Fn() {} //Fn函数
const fn = new Fn() //fn是构造函数，fn是实例对象
console.log(Fn.prototype) // Fn是函数对象
Fn.call({}) // Fn是函数对象
$('#test'); //Jquery函数
$.get('/test') //Jquery函数对象
1.2 两种类型的回调函数
同步回调
1，理解：立即执行，完全执行完了才结束，不会放入回调队列中；
2，例子：数组遍历相关的回调函数/Promise的executor函数
//同步回调函数
const arr = [1, 2, 3];
arr.forEach(item => {
console.log(item);
})
console.log('forEach()之后');
异步回调
1，理解：不会立即执行，会放入到回调队列中将来执行
2，例子：定时器回调/ajax回调/Promise的成功失败回调
//异步回调
setTimeout(() => {
console.log('timeout callback()');
})
console.log('setTimeout()之后');
1.3 JS的error处理
错误的类型
1，Error：所有错误的父类型；
2，ReferenceError：引用的变量不存在；
3，TypeError：数据类型不正确的错误；
4，RangerError：数据值不在其所允许的范围内；
5，SyntaxError：语法错误
错误处理
捕获错误：try ... catch
抛出错误：throw error
错误对象
message属性：错误相关信息
stack属性：函数调用战记录信息
//错我处理
//捕获错误
try {
let d;
console.log(d.xxx);
} catch (error) {
console.log(error.message);
console.log(error.stack);
}
console.log('出错之后');
// 抛出错误
function something() {
if(Date.now() % 2 === 1) {
console.log('当前事件为奇数，可以执行任务');
} else {
throw new Error('当前事件为偶数，无法执行任务');
}
}
//捕获处理异常
try {
something();
} catch (error) {
alert(error.message)
}
二 Promise的理解和使用
2.1 Promise是什么
理解
1，抽象表达：Promise是JS中进行异步编程的新的解决方案(旧的是回调函数)
2，具体表达：
(1)：从语法上来说：Promise是一个构造函数
(2)：从功能上来说：Promise对象用来封装异步操作并可以获取其结果
Promise的状态改变
1，pending变为resolved
2，pending变为rejected
说明：只有这两种，且一个promise对象只能改变一次，无论变为成功或者失败，都会有一个结果数据，成功的结果数据一般称为value，失败的结果数据一般称为reason；
Promise的基本流程
Promise的基本使用
const p = new Promise((resolve, reject) => {
setTimeout(() => {
const time = Date.now();
if(time % 2 == 0) {
resolve('成功的回调。time=' + time);
} else {
reject('失败的回调。time=' + time);
}
}, 1000)
})
p.then(
value => {
console.log('成功的回调', value);
},
reason => {
console.log('失败的回调', reason);
}
);
2.2 为什么要用Promise？
指定回调函数的方式更加灵活
1，旧的：必须在启动异步任务之前指定
2，promise：启动异步任务 => 返回Promise对象 => 给Promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)
//成功的回调函数
function successCallback(result) {
console.log("声音文件创建成功: " + result);
}
// 失败的回调函数
function failureCallback(error) {
console.log("声音文件创建失败: " + error);
}
//使用纯函数回调函数
createAudioFileAsync(audioSettings, successCallback, failureCallback);
// 使用promise
const promise = createAudioFileAsync(audioSettings);
setTimeout(() => {
promise.then(successCallback, failureCallback);
}, 3000);
// 使用promise
const promise = createAudioFileAsync(audioSettings);
promise.then(successCallback, failureCallback);
支持链式调用
1，什么是回调地狱？回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件；
2，回调地狱的缺点：不便与阅读，不便与异常处理；
3，解决方案？promise链式调用；
4，终极解决方案？async/await;
// 回调函数
doSomething(function(result) {
doSomethingSecond(result, function(newResult) {
doThirdThing(newResult, function(finalResult) {
console.log('Got the final result: ' + finalResult)
}, failureCallback)
}, failureCallback)
}, failureCallback);
// 使用promise的链式调用解决回调地狱
doSomething().then(function(result) {
return doSomethingSecond(result);
}).then(function(newResult) {
return doThirdThing(newResult)
}).then(function(finalResult) {
console.log('GGot the final result: ' + finalResult);
}).catch(failureCallback);
// async/await: 回调地狱的终极解决方案
async function request() {
try {
const result = await doSomething();
const newResult = await doSomethingSecond(result);
const finalResult = await doThirdTHing(newResult);
} catch (error) {
failureCallback(error);
}
};
2.3 如何使用Promise
API
1，Promise构造函数：Promise(excutor) {}
（1）excutor函数：执行器 (resolve, reject) => {};
（2）resolve函数：内部定义成功时我们调用的函数value => {};
（3）reject函数：内部定义失败时我们调用的函数reason => {};
说明：excutor会在Promise内部立即同步回调，异步操作在执行器中执行
2，Promise.prototype.then方法：(onResolved, onRejected) => {};
onResolved函数：成功的回调函数(value) => {};
onRejected函数：失败的回调函数(reason) => {};
说明：指定用于得到成功value的成功回调和用于得到失败reason的失败回调，返回一个新的promise对象；
3，Promise.prototype.catch方法：(onRejected) => {};
onRejected函数：失败的回调函数(reason) => {};
说明：then()的语法糖，相当于：then(undefined, onRejected);
4，Promise.resolve方法：(value) => {};
value：成功的数据或者promise对象
说明：返回一个成功/失败的promise对象；
5，Promise.reject方法：(reason) => {};
reason：失败的原因
说明：返回一个失败的promise对象；
6，Promise.all方法：(promises) => {};
promises：包含n个promise的数组
说明：返回一个新的promise，只有所有的promise都成功才成功，只要有一个失败了就直接失败；
7，Promise.race方法：(promises) => {};
promises：包含n个promise的数组
说明：返回一个新的promise，第一个完成的promise的结果状态就是最终的结果状态；
promise的几个关键词
1，如何改变promise的状态
（1）resolve(value):如果当前是pending就会变成resolved；
（2）reject(reason):如果当前是pending就会变成rejected；
2，一个promise指定多个成功/失败的回调函数，都会调用吗？
当promise改变为对应状态时都会调用；
const p = new Promise((resolve, reject) => {
resolve(1); // promise状态变为resolved成功状态
// reject(2); // promise 变为rejected状态
// throw new Error('出错了'); // 抛出异常。promise变为rejected失败状态，reason为抛出的error
// throw 3; // 抛出异常，promise变为rejected失败状态，reason为抛出的3
});
p.then(
value => { console.log('value', value)},
reason => { console.log('reason', reason)}
);
p.then(
value => { console.log('value', value) },
reason => { console.log('reason', reason)}
);
//value 1
//value 1
3，改变promise状态和指定回调函数谁先谁后？
（1）都有可能 ，正常情况下是先指定回调再改变状态，但也有可能先改变状态再指定回调；
（2）如何先改变状态再指定回调？
a, 在执行器中直接调用resolved()/rejected();
b, 延迟更长时间才调用then();
（3）什么时候才能得到数据？
a, 如果先指定的回调，那当状态发生改变时，回调函数就会调用，得到数据；
b, 如果先改变状态，那当指定回调时，回调函数就会调用，得到数据；
// 常规：先指定回调函数，后改变状态
new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1) // 后改变的状态(同时指定数据), 异步执行回调函数
}, 1000);
}).then( // 先指定回调函数，保存当前指定的回调函数
value => { console.log('value', value)},
reason => { console.log('reason', reason)}
);
// 如何改变状态，后指定回调函数
new Promise((resolve, reject) => {
resolve(1); // 先改变状态（同时指定回调函数）
}).then( // 后指定回调函数，异步执行回调函数
value => { console.log('value2', value)},
reason => { console.log('reason2', reason)}
);
// 先改变状态，后指定回调函数
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1) // 后改变状态（同时指定数据），异步执行回调函数
}, 1000);
});
setTimeout(() => {
p.then(
value => { console.log('value3', value)},
reason => { console.log('reason3', reason)}
);
}, 1100);
4，promise.then()返回的新promise的结果状态有什么决定
（1）简单表达：由then()指定的回调函数执行的结果决定；
（2）详细表达：
a, 如果抛出异常，新的promise变为rejected，reason为抛出的异常；
b, 如果返回的是非promise的任意值 ，新promise变为resolved，value为 返回值；
c, 如果返回的是另一个新的promise，次promise的结果就会成为新promise的结果；
new Promise((resolve, reject) => {
resolve(1);
}).then(
value => { console.log('onResolved1()', value) },
reason => { console.log('onRejected1()', reason) }
).then(
value => { console.log('onReasolved2()', value)},
reason => { console.log('onRejected2()', reason)}
);
// onResolved1() 1
// onReasolved2() undefined
new Promise((resolve, reject) => {
// resolve(1);
reject(1);
}).then(
value => { console.log('onResolved1()', value) },
reason => { console.log('onRejected1()', reason) }
).then(
value => { console.log('onReasolved2()', value)},
reason => { console.log('onRejected2()', reason)}
);
//onRejected1() 1
//onReasolved2() undefined
new Promise((resolve, reject) => {
resolve(1);
// reject(1);
}).then(
value => {
console.log('onResolved1()', value);
return 2;
},
reason => { console.log('onRejected1()', reason) }
).then(
value => { console.log('onReasolved2()', value)},
reason => { console.log('onRejected2()', reason)}
);
//onResolved1() 1
//onReasolved2() 2
new Promise((resolve, reject) => {
resolve(1);
// reject(1);
}).then(
value => {
console.log('onResolved1()', value);
// return 2;
return Promise.resolve(3);
},
reason => { console.log('onRejected1()', reason) }
).then(
value => { console.log('onReasolved2()', value)},
reason => { console.log('onRejected2()', reason)}
);
//onResolved1() 1
//onReasolved2() 3
new Promise((resolve, reject) => {
resolve(1);
// reject(1);
}).then(
value => {
console.log('onResolved1()', value);
// return 2;
// return Promise.resolve(3);
return Promise.reject(4);
},
reason => { console.log('onRejected1()', reason) }
).then(
value => { console.log('onReasolved2()', value)},
reason => { console.log('onRejected2()', reason)}
);
// onResolved1() 1
// onRejected2() 4
new Promise((resolve, reject) => {
resolve(1);
// reject(1);
}).then(
value => {
console.log('onResolved1()', value);
// return 2;
// return Promise.resolve(3);
// return Promise.reject(4);
throw 5;
},
reason => { console.log('onRejected1()', reason) }
).then(
value => { console.log('onReasolved2()', value)},
reason => { console.log('onRejected2()', reason)}
);
// onResolved1() 1
// onRejected2() 5
5，promise如何串联多个操作任务？
（1）promise的then()返回一个新的promise，可以直接then()的链式调用；
（2）通过then的链式调用串联多个同步/异步任务;
new Promise((resolve, reject) => {
setTimeout(() => {
console.log("执行任务1(异步)");
resolve(1);
}, 1000);
}).then(
value => {
console.log('任务1的结果：', value);
console.log('执行任务2(同步)');
return 2;
}
).then(
value => {
console.log('任务2的结果：', value);
return new Promise((resolve, reject) => {
// 启动任务3(异步)
setTimeout(() => {
console.log('执行任务3(异步)');
resolve(3);
}, 1000);
});
}
).then(
value => {
console.log('任务3的结果：', value);
}
)
// 执行任务1(异步)
// 任务1的结果： 1
// 执行任务2(同步)
// 任务2的结果： 2
// 执行任务3(异步)
// 任务3的结果： 3
6，promise异常传递？
（1）当使用promise的then链式调用时，可以在最后指定失败的回调；
（2）前面任何操作出了异常，都会传到最后失败的回调中处理；
new Promise((resolve, reject) => {
resolve(1);
}).then(
value => {
console.log('onResolved1()', value);
return 2;
}
).then(
value => {
console.log('onResolved2()', value);
return 3;
}
).then(
value => {
console.log('onResolved3()', value);
}
)
// onResolved1() 1
// onResolved2() 2
// onResolved3() 3
new Promise((resolve, reject) => {
// resolve(1);
reject(1);
}).then(
value => {
console.log('onResolved1()', value);
return 2;
}
).then(
value => {
console.log('onResolved2()', value);
return3;
}
).then(
value => {
console.log('onResolved3()', value);
}
).catch(reason => {
console.log('onRejected1()', reason)
});
// onRejected1() 1
new Promise((resolve, reject) => {
// resolve(1);
reject(1);
}).then(
value => {
console.log('onResolved1()', value);
return 2;
},
reason => { throw reason }
).then(
value => {
console.log('onResolved2()', value);
return3;
},
reason => { throw reason }
).then(
value => {
console.log('onResolved3()', value);
},
reason => { throw reason }
).catch(reason => {
console.log('onRejected1()', reason)
});
// onRejected1() 1
new Promise((resolve, reject) => {
// resolve(1);
reject(1);
}).then(
value => {
console.log('onResolved1()', value);
return 2;
},
// reason => { throw reason }
).then(
value => {
console.log('onResolved2()', value);
return 3;
},
reason => { throw reason }
).then(
value => {
console.log('onResolved3()', value);
},
reason => Promise.reject(reason)
).catch(reason => {
console.log('onRejected1()', reason)
}).then(
value => {
console.log('onResolved3()', value)
},
reason => {
console.log('onRejected2()', reason)
}
);
// onRejected1() 1
// onResolved3() undefined
new Promise((resolve, reject) => {
// resolve(1);
reject(1);
}).then(
value => {
console.log('onResolved1()', value);
return 2;
},
// reason => { throw reason }
).then(
value => {
console.log('onResolved2()', value);
return 3;
},
reason => { throw reason }
).then(
value => {
console.log('onResolved3()', value);
},
reason => Promise.reject(reason)
).catch(reason => {
console.log('onRejected1()', reason);
throw reason;
}).then(
value => {
console.log('onResolved3()', value)
},
reason => {
console.log('onRejected2()', reason)
}
);
// onRejected1() 1
// onRejected2() 1
new Promise((resolve, reject) => {
// resolve(1);
reject(1);
}).then(
value => {
console.log('onResolved1()', value);
return 2;
},
// reason => { throw reason }
).then(
value => {
console.log('onResolved2()', value);
return 3;
},
reason => { throw reason }
).then(
value => {
console.log('onResolved3()', value);
},
reason => Promise.reject(reason)
).catch(reason => {
console.log('onRejected1()', reason);
// throw reason;
return Promise.reject(reason);
}).then(
value => {
console.log('onResolved3()', value)
},
reason => {
console.log('onRejected2()', reason)
}
);
// onRejected1() 1
// onRejected2() 1
7，中断promise链？
（1）当使用promise的then链式调用时，在中间中断，不再调用其后面的回调函数；
（2）方法：在回调函数中返回一个pending状态的promise对象；
new Promise((resolve, reject) => {
// resolve(1);
reject(1);
}).then(
value => {
console.log('onResolved1()', value);
return 2;
},
// reason => { throw reason }
).then(
value => {
console.log('onResolved2()', value);
return 3;
},
reason => { throw reason }
).then(
value => {
console.log('onResolved3()', value);
},
reason => Promise.reject(reason)
).catch(reason => {
console.log('onRejected1()', reason);
// throw reason;
// return Promise.reject(reason);
return new Promise(() => {}) // 返回一个pending的promise
}).then(
value => {
console.log('onResolved3()', value)
},
reason => {
console.log('onRejected2()', reason)
}
);
// onRejected1() 1
三 自定义Promise
3.1 定义整体结构
/*
自定义Promise
*/
(function (window) {
const PENDING = 'pending';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';
/*
promise构造函数
executor: 内部同步执行的函数 (resolve, reject) => {}
*/
function Promise(excutor) {
}
/*
为promise指定成功/失败的回调函数
函数返回的是一个新的promise对象
*/
Promise.prototype.then = function(onResolved, onRejected) {
}
/*
为promise指定的失败的回调函数
是then(null, onRejected)的语法糖
*/
Promise.prototype.catch = function (onRejected) {
}
/*
返回了一个指定了成功value的promise对象
*/
Promise.resolve = function(value) {
}
/*
Promise函数对象的reject方法
*/
Promise.reject = function (reason) {
}
/*
Promise函数对象的all方法
*/
Promise.all = function(promises) {
}
/*
Promise函数对象的race方法
*/
Promise.race = function(promises) {
}
// 向window对象暴露Promise方法
window.Promise = Promise;
})(window);
3.2 Promise构造函数的实现
function Promise(excutor) {
const self = this;
self.status = PENDING; // 给promise对象指定status属性，初始值为pending
self.data = undefined; // 给promise对象指定一个用于存储结果数据的属性
self.callbacks = []; // 每个元素的结构：{ onResolved() {}, onREjected() {}}
function resolve (value) {
// 如果当前不是pending状态，直接结束
if (self.status !== PENDING) {
return
}
// 将状态改为resolved
self.status = RESOLVED;
self.data = value;
// 如果有待执行callback函数，立即异步执行回调函数onResolved
if (self.callbacks.length > 0) {
setTimeout(() => { // 放入队列中执行所有成功的回调
self.callbacks.forEach(callbackObj => {
callbackObj.onResolved(value)
})
});
}
}
function reject (reason) {
// 如果当前不是pending状态，直接结束
if (self.status !== PENDING) {
return
}
// 将状态改为resolved
self.status = REJECTED ;
self.data = reason;
// 如果有待执行callback函数，立即异步执行回调函数onResolved
if (self.callbacks.length > 0) {
setTimeout(() => { // 放入队列中执行所有成功的回调
self.callbacks.forEach(callbackObj => {
callbackObj.onRejected(reason)
})
});
}
}
// 立即同步执行excutor
try {
excutor(resolve, reject);
} catch (error) { // 如果执行器抛出异常，promise对象变为rejected状态
reject(error)
}
}
3.3 Promise.then()/catch()的实现
then的实现
/*
Promise原型对象的then()
指定成功和失败的回调函数
返回一个新的promise对象
*/
Promise.prototype.then = function (onResolved, onRejected) {
onResolved = typeof onResolved === 'function' ? onResolved : value => value; // 向后传递成功的value
// 指定默认的失败的回调(实现错误/异常传透的关键点)
onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason } // 朝后传递失败的reason
const self = this;
return new Promise((resolve, reject) => {
/*
调用指定回调函数处理，根据执行结果，改变return的promise的状态
*/
function handle(callback) {
/*
1，如果抛出异常，return的promise就会失败，reason就是error；
2，如果回调函数返回的不是promise，return的promise就会成功，value就是返回结果
3，如果回调函数返回的是promise，return的promise结果就是这个promise的结果
*/
try {
const result = callback(self.data);
// 3，如果回调函数返回的是promise，return的promise结果就是这个promise的结果
if (result instanceof Promise) {
result.then(
value => resolve(value), // 当result成功时，让return的promise也成功
reason => reject(reason) // 点那个result失败时，让return的promise也失败
)
} else {
// 2，如果回调函数返回不是promise，return的promise就会成功，value就是返回结果
resolve(result);
}
} catch (error) {
// 1，如果抛出异常，return的promise就会失败，reason就是error；
reject(error)
}
}
if (self.status === PENDING) {
// 假设当前状态还是pending状态，将回调函数保存起来
self.callbacks.push({
onResolved (value) {
handle(onResolved);
},
onRejected (reason) {
handle(onRejected);
}
})
} else if (self.status === RESOLVED) {
setTimeout(() => {
handle(onResolved);
})
} else {
setTimeout(() => {
handle(onRejected);
})
}
})
}
catch的实现
/*
Promise原型对象的catch()
指定失败的回调函数
返回一个新的promise对象
*/
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected);
}
3.4 Promise.resolve()/reject()的实现
resolve的实现
/*
返回一个指定了成功value的promise对象
value：一般数据或者promise
*/
Promise.resolve = function(value) {
return new Promise((resolve, reject) => {
if(value instanceof Promise) {
value.then(resolve, reject)
} else {
resolve(value);
}
})
}
reject的实现
/*
Promise函数对象的reject方法
返回一个指定reason的失败的promise
*/
Promise.reject = function (reason) {
// 返回一个失败的promise
return new Promise((resolve, reject) => {
reject(reason);
})
}
3.5 Promise.all()/race()的实现
Promise.all的实现
/*
Promise函数对象的all方法
*/
Promise.all = function (promises) {
return new Promise((resolve, reject) => {
if(!Array.isArray(promises)) {
return reject(new Error('传入的参数必须是数组!'));
}
const res = [];
const promiseNum = promises.length;
let counter = 0;
for (let i = 0; i < promiseNum; i++) {
Promise.resolve(promises[i]).then(function (value) {
counter++;
res[i] = value;
if(counter === promiseNum) {
return resolve(res);
}
}, function (reason) {
return reject(reason);
});
}
})
}
Promise.race的实现
/*
Promise函数对象的race方法
*/
Promise.race = function (promises) {
if (!Array.isArray(promises)) {
throw new Error('promises must be an array!');
}
return new Promise(function (resolve, reject) {
promises.forEach(p => {
Promise.resolve(p).then(data => {
resolve(data);
}, err => {
reject(err);
})
})
})
}
3.6 Promise.resolveDelay()/rejectDelay()的实现
Promise.resolveDelay的实现
/*
返回一个延迟指定时间才能确定结果的promise对象
*/
Promise.resolveDelay = function (value, time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if(value instanceof Promise) {
value.then(resolve, reject);
} else {
resolve(value)
}
}, time);
})
}
Promise.rejectDelay的实现
/*
返回一个promise对象，在指定的时间后才失败
*/
Promise.rejectDelay = function (reason, time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(reason);
}, time)
})
}
3.7 Promise.first实现
if ( !Promise.first ) {
// get first resolve result
Promise.first = promiseList => {
return new Promise( ( resolve, reject ) => {
var num = 0;
var len = promiseList.length;
promiseList.forEach( pms => {
Promise.resolve( pms ).then( resolve ).catch( () => {
num++;
if ( num === len ) {
reject( 'all promises not resolve' );
}
} );
} );
} );
};
}
四 async与await
4.1 async函数
1，函数的返回值是一个promise对象
async function fn1() {
// return 1;
// throw 2;
// return Promise.reject(3);
// return Promise.resolve(4);
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(4);
}, 1000)
})
}
const result = fn1();
result.then(
value => {
console.log('onResolved()', value)
},
reason => {
console.log('onRejected()', reason);
}
)
2，promise对象的结果由async函数执行的返回值决定
function fn2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(5)
}, 1000)
})
}
async function fn3() {
const value = await fn2();
console.log('value', value)
}
fn3();
4.2 await表达式
1，await右侧的表达式一般为promise对象，但也可以是其它的值;
2，如果表达式的promise对象，await返回的是promise成功的值
await右侧表达式的值为promise，得到的结果就是promise成功的value
function fn2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(5)
}, 1000)
})
}
async function fn3() {
const value = await fn2(); // await右侧表达式不是promise，得到的结果是表达式的值
console.log('value', value)
}
fn3();
await右侧表达式不是promise，得到的结果就是表达式的值
function fn4() {
return 6;
}
async function fn3() {
const value = await fn4(); // await右侧表达式不是promise，得到的结果是表达式的值
console.log('value', value)
}
fn3();
4.3 注意
await必须写在async中，但async函数中可以没有await；如果await的promise失败了，就会抛出异常，需要通过try...catch来捕获处理
function fn2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
// resolve(5)
reject(6);
}, 1000)
})
}
async function fn3() {
try {
const value = await fn2();
console.log('value', value)
} catch (error) {
console.log('失败的结果', error)
}
}
fn3();
五 面试题分析
1，说出下面打印结果
setTimeout(() => {
console.log(1);
}, 0)
Promise.resolve().then(() => {
console.log(2);
})
Promise.resolve().then(() => {
console.log(4);
})
console.log(5);
// 5 2 4 1
2，以下代码打印结果
setTimeout(() => {
console.log(1);
}, 0)
new Promise((resolve) => {
console.log(2);
resolve();
}).then(() => {
console.log(3);
}).then(() => {
console.log(4);
})
console.log(5);
// 2 5 3 4 1
3，以下代码打印结果
const first = () => (new Promise((resolve, reject) => {
console.log(3);
let p = new Promise((resolve, reject) => {
console.log(7);
setTimeout(() => {
console.log(5);
resolve(6);
}, 0);
resolve(1);
})
resolve(2);
p.then((arg) => {
console.log(arg)
})
}))
first().then((arg) => {
console.log(arg);
})
console.log(4)
// 3 7 4 1 2 5
4，以下代码打印结果
setTimeout(() => {
console.log(0);
}, 0);
new Promise((resolve, reject) => {
console.log(1);
resolve();
}).then(() => {
console.log(2);
new Promise((resolve, reject) => {
console.log(3);
resolve();
}).then(() => {
console.log(4)
}).then(() => {
console.log(5)
})
}).then(() => {
console.log(6)
});
new Promise((resolve, reject) => {
console.log(7);
resolve();
}).then(() => {
console.log(8);
});
// 1 7 2 3 8 4 6 5 0
