Javascript的异步编程（上）及es6的promise

Javascript语言的执行环境是"单线程"（single thread）。

所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。

这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。

为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。

"同步模式"就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；"异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

所谓"异步"，简单说就是一个任务分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。比如，有一个任务是读取文件进行处理，任务的第一段是向操作系统发出请求，要求读取文件。然后，程序执行其他任务，等到操作系统返回文件，再接着执行任务的第二段（处理文件）

"异步模式"非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，"异步模式"甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。

"异步模式"编程可以让你写出结构更合理、性能更出色、维护更方便的Javascript程序。

一、回调函数

所谓回调函数，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。

这是异步编程最基本的方法。

假定有两个函数f1和f2，后者等待前者的执行结果。

　　f1();

　　f2();

如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函数。

　　　　setTimeout(function () {

　　　　　　// f1的任务代码

　　　　　　callback();

　　　　}, 1000);

　　}

执行代码就变成下面这样：

　　f1(f2);

采用这种方式，我们把同步操作变成了异步操作，f1不会堵塞程序运行，相当于先执行程序的主要逻辑，将耗时的操作推迟执行。

回调函数的第一个参数，必须是错误对象err（如果没有错误，该参数就是 null）？原因是执行分成两段，在这两段之间抛出的错误，程序无法捕捉，只能当作参数，传入第二段。

function (err, data) {
  if (err) throw err;
  console.log(data);

}

　　function f1(callback){

回调函数的优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），流程会很混乱，而且每个任务只能指定一个回调函数。

二、Promise对象

Promise对象是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。它不是新的语法功能，而是一种新的写法，允许将回调函数的横向加载，改成纵向加载。采用Promise，连续读取多个文件，

简单说，它的思想是，每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。比如，f1的回调函数f2,可以写成：

　　f1().then(f2);

f1要进行如下改写（这里使用的是jQuery的实现）：

　　function f1(){

　　　　var dfd = $.Deferred();

　　　　setTimeout(function () {

　　　　　　// f1的任务代码

　　　　　　dfd.resolve();

　　　　}, 500);

　　　　return dfd.promise;

　　}

这样写的优点在于，回调函数变成了链式写法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以实现许多强大的功能。

比如，指定多个回调函数：

　　f1().then(f2).then(f3);

再比如，指定发生错误时的回调函数：

　　f1().then(f2).fail(f3);

而且，它还有一个前面三种方法都没有的好处：如果一个任务已经完成，再添加回调函数，该回调函数会立即执行。所以，你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解，都相对比较难。

Promise的基本用法

1 2 3 4 5 6 7 8 9 10 11

let ajax=function(){         console.log("执行");         return new Promise(function(resolve,reject){//运行完ajax之后返回一个对象promise实例，有then方法 console.log("执行1");//这里也是ajax执行的内容             setTimeout(function(){//模拟整个通信过程中的时间                 resolve()//1秒后执行下一步，执行的是 console.log("promise","timeout");             },1000)         })     }     ajax().then(function(){         console.log("promise","timeout");     })

//连续调用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

let ajax=function(){         console.log("执行1");         return new Promise(function(resolve,reject){             setTimeout(function(){                 resolve()             },1000)         })     }     ajax()         .then(function(){         return new Promise(function(resolve,reject){             setTimeout(function(){                 resolve()             },2000)         })         .then(function(){             console.log("timeout3")         })       }) console.log： 执行1 执行 两秒后 timeout1 timeout2 再过两秒 timeout3

//catch方法捕捉执行过程中抛出的错误

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

let ajax=function(num){         console.log("执行乐乐乐");         return new Promise(function(resolve,reject){             if(num>5){                 resolve()             }else{                 throw Error("出错了");             }         })     }     ajax(6).then(function(){         console.log("执行第二步");     }).catch(function(err){         console.log("catch",err);     })//执行第二步     ajax(1).then(function(){         console.log("执行第二步");     }).catch(function(err){         console.log("catch",err);     })//出错了

　　

举例子：图片加载过程

1.所有图片加载完再加载到页面----Promise.all

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

function loadImg(src){//加载图片的函数        return new Promise((resolve,reject)=>{            let img=document.createElement("img");            img.src=src;            img.onload=function(){//图片加载完成之后                resolve(img);            }            img.onerror=function(err){//                reject(err);            }        })    }      function shopImgs(imgs){//将图片显示在网页中        imgs.forEach(function(img){//先遍历            document.body.appendChild(img);        })    }      Promise.all([//将多个promise实例当成一个数组，当数组中的所有元素操作都完成之后，这个新的promise实例才变化，且返回promise实例        loadImg("http://img.tgljweb.com/1720171108170301_tango_img"),        loadImg("http://img.tgljweb.com/1720171112111533_tango_img"),        loadImg("http://img.tgljweb.com/1720171104093842_tango_img"),    ]).then(shopImgs)

 2.当有一个图片加载完就显示在页面，即哪一张先加载出来，就显示哪一张----Promise.race（先到先得）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

function loadImg(src){         return new Promise((resolve,reject)=>{             let img=document.createElement("img");             img.src=src;             img.onload=function(){                 resolve(img);             }             img.onerror=function(err){                 reject(err);             }         })     }     function shopImgs(img){         let p=document.createElement("p");         p.appendChild(img);         document.body.appendChild(p);     }       Promise.race([         loadImg("http://img.tgljweb.com/1720171108170301_tango_img"),         loadImg("http://img.tgljweb.com/1720171112111533_tango_img"),         loadImg("http://img.tgljweb.com/1720171104093842_tango_img")     ]).then(shopImgs)