js之同步和异步

js语言是单线程的（single thread），即一次只能完成一个任务，若存在多个任务，则需排队，等前面一个任务完成之后，后面一个任务才能开始执行。
但是这样存在一个问题，若存在一个执行耗时很长的任务（例如ajax），后面的任务就必须排队等待，这样就拖延了整个程序的执行，造成浏览器出现假死的状态，导致页面卡在某个地方无法运行。

因此js将任务的执行模式分为同步（Synchronous）和异步（Asynchronous）。
“同步”，即后一个任务需等待前一个任务结束后，才能执行，程序的执行顺序与任务的排列顺序是一致的、同步的；
“异步”，即每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序是不一致的、异步的。

js中所有的任务可以分为两种：同步任务和异步任务；
同步任务：在主线程上排队执行的任务，只有等前一个任务完成了，才能执行后一个任务；
异步任务：不仅如此主线程，而是进入任务队列中的内容，只有任务队列通知主线程，某个异步任务可以执行了，这个任务才会进入主线程执行；
事件循环（Event loop）：只有执行栈中的所有同步任务都执行完毕，系统才会读取任务队列，看看里面的异步任务哪些可以执行，然后那些对应的异步任务，结束等待状态，进入执行栈，开始执行。

异步解决方案：
1、回调函数（callback）
参考文章 通俗理解“回调函数”
回调函数是一种约定俗成的叫法，回调可以理解成“回头调用”，我们定义一个函数，但并没有去执行它，而是将这个函数作为一个参数传给另一个函数（将这个函数成为主函数），对于耗时时间长的回调函数，主函数可以不等待回调函数执行完，可以先执行自己的代码。

function A(callback){
  callback();
  console.log('这是A');
}

function B(){
  console.log('zheshi B');  //这里耗时短，会直接执行
  setTimeout("console.log('这是B')", 3000); //耗时长，主函数并不会等待其执行完，而是先去执行自己的代码
}

A(B);

执行结果

如上图所示，函数B作为一个参数传给函数A，即函数B是一个回调函数，在函数A中我们让其先去执行回调函数B，对于回调函数中耗时短的console，函数A会直接输出其结果，而对于需要等待3秒才执行的部分，函数A并不会等待，而是先去执行其自己的代码，等时间到了才去执行B中的剩余代码。
这样，回调函数就将耗时长的同步操作变成了异步。
但是其存在一些缺点：
1、高耦合，维护困难，容易陷入回调地狱；
2、每个任务只能指定一个回调函数；
3、若几个异步操作之间没有顺序之分，同样要等待上一个操作结束再进行下一个操作。

2、事件监听
采用事件驱动模式，任务的执行不取决于代码的顺序，而取决于某一个事件是否发生。
监听函数有：on, bind, listen, addEventListener, observe
例如onclick方法
3、promise对象
ES6提供了一个原生的构造函数Promise，Promise是异步编程的一种解决方案，这样就将异步对象和回调函数脱离开来，通过.then方法在这个异步操作上绑定回调函数，promise通过链式调用的方式解决了毁掉嵌套的问题，同时由于promise.all的存在，可以同时执行多个操作。

Promise对象具有以下两个特点：
1、对象的状态不受外界影响。Promise代表一个异步操作，其有3种状态：Pending（进行中），Fulfilled（已成功），Rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
2、一旦状态改变就不会再变，任何时候都可以得到这个结果。
Promise对象的状态改变只有两种可能：
Pending——>Fulfilled 即Resolved状态
Pending——>Rejected 即Rejected状态

ES6规定，Promise对象是一个构造函数，用来生成Promise实例，Promise构造函数接受一个函数作为参数，该函数有两个参数，resolve和reject；

var promise = new Promise(function(resolve, reject){
  //....some code
  
  if(/*异步操作成功*/){
    resolve(value);
  }else{
    reject(error);
  }
})

Promise实例生成之后，可以使用then方法分别指定Resolved状态和Rejected状态，then方法接受两个回调函数作为参数，第一个是Promise对象的状态变为Resolved时调用，第二个是Promise对象的状态变为Rejected时调用，其中第二个是可选的。

Promise新建后会立即执行

let promise = new Promise(function(resolve, reject){
  console.log('新建Promise');
  resolve();
});

promise.then(function(){
  console.log('Resolved');
})

console.log('Hi');

执行结果

如上所示，Promise在新建后会立即执行，所以首先输出“新建Promise”，然后，then方法指定的回调函数将在当前脚本所有同步任务完成后才会执行，因此先输出‘Hi’，最后输出“Resolved”。

resolve函数除了正常的值以外，还可能是另一个Promise实例

var p1 = new Promise(function(resolve, reject){
  setTimeout(() => reject(new Error('fail')), 3000)
})

var p2 = new Promise(function(resolve, reject){
  setTimeout(() => resolve(p1), 1000)
})

p2
  .then(result => console.log(result))
  .catch(error => console.log(error))

上面代码中，p1和p2都是Promise实例，但是p2中的resolve方法将p1作为参数，即一个异步操作的结果返回另一个异步操作，此时p1的状态就会传递给p2，即p1的状态决定了p2，若p1的状态是Resolved或Rejected，那么p2的回调函数将会立即执行。因此上面代码的执行过程是p2的状态在1秒之后改变，但其resolve方法返回的是p1，因此p2自己的状态无效，由p1决定，p2的then语句，就变成针对p1的，再过2秒，p1变成rejected，触发catch方法指定的回调函数，输出

注意：调用resolve和reject并不会终结Promise的参数函数的执行
若要终结，在其前面加上return

then的链式操作
then方法返回的是一个新的Promise实例（但不是以前的那个Promise实例），因此可以采用链式写法，即then后面可以调用另一个then，其下一个回调函数的参数是上一个回调函数的返回结果。

promise.prototype.catch
.then(null, rejection)的别名，该方法用于指定发生错误时的回调函数。
Promise对象的错误，会一直向后传递，直到被捕获，即错误总会被下一个catch捕获。因此then方法指定的回调函数若在运行中抛出错误，也会被catch方法捕获。
但是，由于Promise的状态一旦改变就不会再改变，因此若Promise状态一经变成Resolved，再抛出错误也是无效的。

var promise = new Promise(function(resolve, reject){
    resolve('ok');
    throw new Error('test');
  })
  
  promise
    .then(value => console.log(value))
    .catch(error => console.log(error))

上面代码在resolve后面抛出错误时无效的，
代码执行结果

var promise = new Promise((resolve, reject) => {
  resolve('success1');
  reject('error');
  resolve('success2');
})

promise
  .then((res) => {
    console.log(res);  //输出success1
  })
  .catch((error) => {
    console.log(error);
  })

上面的代码同样说明了，Promise的状态一旦改变就不会再改变！

catch方法返回的还是一个Promise对象，因此后面可以接着调用then方法

Promise.all()
将多个Promise实例，打包成一个新的Promise实例

var p = Promise.all([p1, p2, p3]);

1、只要p1、p2、p3的状态都变成Fulfilled，p的状态才会变成Fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
2、只要p1、p2、p3有一个被Rejected，p的状态就会变成Rejected，此时第一个被Rejected的返回值会传递给p的回调函数。

Promise.race()
同样是将多个Promise实例包装成一个新的Promise实例

var p = Promise.race([p1, p2, p3]);

只要p1、p2、p3中有一个实例率先改变状态，p的状态就跟着改变。那个先改变的Promise实例的返回值就传递给p的回调函数。

Promise.resolve()
带参数时

不带有参数时，返回一个Resolved状态的Promise对象
Promise.resolve()是new Promise()的快捷方式
Promise.resolve(value)是下面代码的语法糖

new Promise(function(resolve) {
  resolve(value)
})

Promise.reject()
也是new Promise()的快捷方式，返回一个新的Promise实例，状态为Rejected。
Promise.reject(error)是下面代码的语法糖

new Promise(function(resolve) {
  reject(error)
})

Promise.reject()方法的参数会原封不动的作为reject的理由变成后续方法的参数。
由于catch方法返回的也是一个Promise对象，它可以继续调用then方法，若想catch之后一直是catch，可以在其函数中return Promise.reject()；

4、async和await