javascript异步操作 Promise

语言特色

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("加载完成。");
			});

Abudula__

发布了83 篇原创文章 · 获赞 18 · 访问量 5万+

私信关注