Promise
new Promise((resolve, reject) => {
var param = 'Promise 执行完后返回的数据';
var error = 'Promise 异步执行异常';
if( error ) {
reject(new Error('Promise 异步执行异常'));
} else {
resolve(param);
}
}).then((res) => {
// 这里res就是Promise中的param参数
console.log(res); // Promise 执行完后返回的数据
var param = '第一个then 执行完后返回的数据';
return param;
}).then((res) => {
// 这里的res就不是Promise中resolve的param参数了,而是上一个then中的返回值
console.log(res); // 第一个then 执行完后返回的数据
}).catch((error) => {
// 这里是Promise执行reject方法中的参数
console.log(error); // Promise 异步执行异常
});
第一个then()
触发条件:是 Promise()
实例化时resolve()
触发,resolve(param)
第二个及以后的then()
触发条件是第一个then()
执行完成,并且将return
值作为下一个then
的参数。
catch()
触发条件是执行了reject()
需要注意的是resolve
与reject
只能执行一个。也就是说如果不加入判断的话,某一个先执行了,后面的就自动忽略了。
async & await
由于刚开始接触这方面的内容,仅做最简单的描述,可能存在很多误区,以后慢慢更正。
前端经常要和异步打交道,过去都是通过回调函数来处理异步数据。
var res = 0;
setTimeout(function () {
res = 10;
}, 1000);
console.log(res);
上面是一个很典型的异步方法,其实这段代码我们想要的结果是 10;
但是由于异步的原因,导致结果还没有变更,我们已经把原始数据打印出来了。
那么,我们过去可能会通过回调的办法来解决这个问题。
把执行打印的代码放到回调函数中,在回调中处理数据。
var res = 0;
setTimeout(function () {
res = 10;
console.log(res);
}, 1000);
虽然这样不失为解决问题的办法,但是实际业务中各个异步返回的数据中可能互相之间有利用关系,那么各种嵌套回调的问题也就随之而来了。
var res1 = 0, res2 = 0, res3 = 0;
setTimeout(function () {
res1 = 10;
setTimeout(function () {
res2 = 20;
setTimeout(function () {
res3 = 30;
console.log(res1 + res2 + res3);
}, 1000);
}, 1000);
}, 1000);
像上面这样的情况在实际业务中很常见。
我们有3个数据接口,最终我们要将3个接口返回的数据合并,就只能一层一层的嵌套下去。
那么如果有5个、10个这样的接口呢?我想从代码的阅读方面就是个灾难吧。
当然我们可以把请求改为同步的,但是!同步就意味着阻塞。这里不做讨论。
终于到async
和 await
上场了......
;(async ()=> {
var res1 = await new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve(10);
}, 1000);
});
var res2 = await new Promise((resolve, reject) => {
setTimeout(()=>{
resolve(20);
}, 1000);
});
var res3 = await new Promise((resolve, reject) => {
setTimeout(()=>{
resolve(30);
}, 1000);
});
console.log(res1 + res2 + res3);
})();
同样的结果,但是我们的代码仿佛变成的同步模式一样。再也没有无限嵌套了!