Promise

Posted 2020-12-14 ainsliaea

1. 事件循环和 Promise

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop

https://zhuanlan.zhihu.com/p/33058983

const?s?=?new?Date().getSeconds();
console.log(s);
setTimeout(function?()?{
??//?输出?"2"，表示回调函数并没有在?500?毫秒之后立即执行
??console.log("s?is?:?"?+?s);
??console.log("Ran?after?"?+?(new?Date().getSeconds()?-?s)?+?"?seconds");
},?500);

console.log("after?setTimeout...");

while?(true)?{
??//???console.log("loop...");
??if?(new?Date().getSeconds()?-?s?>=?2)?{
????console.log("Good,?looped?for?2?seconds");
????break;
??}
}

//?23
//?after?setTimeout...
//?Good,?looped?for?2?seconds
//?s?is?:?23
//?Ran?after?2?seconds

在上面的例子中，while 循环一直在占用消息队列，直到 2 秒之后循环结束，此时 setTimeout 的 500ms 早已到期，所以立即执行，输出 2。

const?promise?=?new?Promise(function?(resolve,?reject)?{
???setTimeout(function?()?{
????console.log("hello");
??},?0);
	resolve("ok");
??console.log("end");
});

promise.then(function?(value)?{
??console.log(value);
});

//?end
//?ok
//?hello

在这个例子中，即使 setTimeout 的 delay 设置为 0，resolve 还是先于 setTimeout 执行。

2. return Promise.reject(error);

axios 的 request 和 response 的拦截器经常这么写，其实就是对一个错误进行抛出，和 throw 效果一样，需要在接下来的 catch 中进行捕获。

let?foo?=?new?Promise((resolve,?reject)?=>?{
??reject(‘hwhw‘);
});
foo
??.then(
????(res)?=>?{
??????console.log(‘then...‘);
??????console.log(res,?x);
????},
????(error)?=>?{
??????console.log(‘then--error...‘);
??????console.log(error);
??????//?return?Promise.reject(error?+?‘again‘);?//?和下面的?new?Error?作用一样，都是被?catch?捕获
??????throw?new?Error(error?+?‘again2‘);
????}
??)
??.catch((error)?=>?{
????console.log(‘catch...‘);
????console.log(error.message);
??});