语言特色
javascript 是一门单线程语言,意思就是同时只能执行一个任务,其他任务必须排队等待。
为什么搞成单线程原因是因为一个如果一个线程是在网页上修改DOM,另一个线程在删除DOM。这样肯定不行。JavaScript 从诞生起就是单线程,原因是不想让浏览器变得太复杂,因为多线程需要共享资源、且有可能修改彼此的运行结果,对于一种网页脚本语言来说,这就太复杂了。这种的好处是实现起来比较方便,单坏处就是只要一个任务消耗的时间多,就会造成后面的任务排队,会拖延整个程序的执行。这种慢的原因不是CPU忙不过来,而是单纯的因为一个任务执行需要很长时间,比如 Ajax请求等。JavaScript 语言的设计者意识到,这时 CPU 完全可以不管 IO 操作,挂起处于等待中的任务,先运行排在后面的任务。等到 IO 操作返回了结果,再回过头,把挂起的任务继续执行下去。这种机制就是 JavaScript 内部采用的“事件循环”机制(Event Loop)。
同步任务 || 异步任务
所有的任务可以分为同步任务和异步任务。
同步任务是指不会被引擎挂起,在主线程上排队执行任务。只有前一个任务执行完毕,才会执行后一个任务。
异步任务 是指会被挂在引擎,不进入主线程,而是会进入任务队列的任务。只有引擎认为某个任务可以执行了,比如Ajax从服务器返回了数据,该任务采用回调的形式会进入主线程来执行。排在异步任务后面的代码不会等待异步任务有结果,而是会立即执行。因此异步任务不会有阻塞效应。
任务队列和事件循环
Javascript运行是除了一个正在运行的主线程以外,引擎还提供了任务队列,里面是各种需要当前程序处理的异步任务。
首先,主线程会执行所有的同步任务,同步任务被执行完以后会去看任务队列,如果满足条件,那么异步任务就会重新进入主线程开始执行。这个时候它就变成了同步任务。等到执行完,下一个异步任务就会进入主线程,直到全部任务执行完。
异步操作解决方案
promise对象是Javascript的异步操作解决方案,为异步操作提供统一接口。Promise可以让异步操作写起来,就像在写同步操作一样,而不必一层层嵌套回调函数。
首先,Promise是一个对象,也是一个构造函数。
function f1(resolve,reject){
// 异步操作
}
let p1=new Promise(f1);
Promise构造函数接收回调函数f1作为参数,f1 里面的是异步操作的代码,然后返回的p1就是 一个Promise的实例。
Promsie 的设计思想是所有的异步任务都返回一个Promise实例。Priomse实例有一个then 方法,用来指定下一步的回调函数。
var p1=new Promise(f1);
p1.then(f2);
上面的代码中,f1的异步操作执行完,就会执行f2.
// 传统写法
step1(function (value1) {
step2(value1, function(value2) {
step3(value2, function(value3) {
step4(value3, function(value4) {
// ...
});
});
});
});
// Promise 的写法
(new Promise(step1))
.then(step2)
.then(step3)
.then(step4);
可以看出promise写法使程序流程变得非常清楚。
Promise 对象的状态
Promise对象具有3中状态。
1.未完成
2.异步操作成功
3.异步操作失败
状态变化只有两种:
未完成----失败
未完成–成功
因此Promise最终结果只有两种:
- 异步操作成功,Promise实例返回一个值。
- 异步操作失败,Promsie实例返回error.
Promise 构造函数
Javascript提供原生的构造函数,用来生成Promise实例。
var promise = new Promise(function(resolve, reject) {
if ( /* 异步操作成功 */ ) {
resolve(value);
} else { /* 异步操作失败 */
reject(new Error());
}
});
上面代码中Promise构造函数接收一个函数,该函数的两个参数分别是resolve,reject。他们是两个函数,由Javascript来提供,不用自己实现。
resolve的作用是将Promise实例的状态从未完成到成功,并且把异步操作的结果作为参数传递出去。reject函数的作用是将Promise实例的状态从未完成变为失败,并将错误传递出去。
Promise.prototype.then
Promise实例的then方法用来添加回调函数。
then方法可以接收两个参数,第一个是异步操作成功时的回调函数,第二个是异步操作失败时的回调函数。
var p1=new Promise(function(resolve,reject){
resolve("success")
});
p1.then(console.log,console.error); //success
var p2=new Promise(function(resolve,reject){
reject("error");
});
p2.then(console.log,console.error); //error
由上面的代码可以看出 p1,p2都是Promise的两个实例,他们的then方法会执行两个回调函数,第一个会在实例成功的时候执行,第二个会在实例失败的时候执行。第二个方法可以省略。
Promse 的then方法具有链式性。下面的代码中有4个then,意味着只有前一个返回成功,下一个方法才会执行。
p1
.then(step1)
.then(step2)
.then(step3)
.then(
console.log,
console.error
);
实例 图片加载
var preloadImage=function(path){
return new Promise(function(resolve,reject){
let image=new Image();
image.onload=resolve;
image.onerror=reject;
image.src=path;
});
}
preloadImage('https://example.com/my.jpg').then(
function(e){
document.body.append(e.target);
}
).then(function(){
console.log("加载完成。");
});