JS的宏任务和微任务

JS的宏任务和微任务

• JS宿主环境有事件循环，异步任务会被加入到任务队列。任务队列分为两种，宏任务和微任务。

• 宏任务队列会有很多个，微任务队列只有一个。

• 每次事件循环，先执行微任务队列，执行完后，会选择一个宏任务队列的一个任务执行，然后再次执行微任务队列，完成后再挑一个宏任务队列一个任务执行。

• 总之，就是 微任务栈—>宏任务栈[0]—>微任务栈—>宏任务栈[0]…

• 结果就是 微任务会先于宏任务执行

• 微任务栈
  process.nextTick
  promise
  Object.observe
  MutationObserver
  
  宏任务栈
  setTimeout
  setInterval
  serImmediate
  script(全局任务)
  I/O(例如ajax)
  UI渲染
  
  优先级：process.nextTick > promise,setImmediate > setTimeout
  
  微任务：所有p开头的和观察的； 
  宏任务：所有set开头的、以及大块操作，例如script标签，IO,UI渲染
  

• 同步代码执行顺序优先级高于一部戴拿执行顺序优先级；

• new Promise(fn)中的fn是同步执行的

• process.nextTick() > Promise.then() > setTimeout >setImmediate

Promise的用法总结

• Promise的状态

  • Promise对象有三个状态：
    • 进行中 pending
    • 成功 resolved
    • 失败 rejected

• 生成一个Promise对象

  • 构造函数

    • new Promise(function(resolve,reject){})
      
      resolve 和 reject函数是浏览器内部实现的，直接调用即可。
      

  • Promise.resolve

    • promise.resolve()：直接返回一个resolve状态的promise对象
    • promise.resolve 可以用来生成一个then链

  • Promise.reject

    • Promise.reject()：直接返回一个reject状态的Promise对象

  • Promise的then用法

    • Promise的then永远返回一个新的promise，promise的catch是then(null,rejection)的语法糖，catch中也会返回一个新的Promise.

    • 建议在Promise的then永远return或throw，不要只是执行一个函数。

    • var aPromise = new Promise(function(resolve){
      	resolve(100);
      });
      
      var thenPromise = aPromise.then(function(value){
       	console.log(value);
      });
      
      var catchPromise = thenPromise.catch(function(error){
      	console.log(error);
      });
      console.log(aPromise !== thenPromise);
      console.log(thenPromise !== catchPromise);
      
      ===是严格相等比较运算符，三个对象都互不相同，说明then和catch都返回了和调用者不同的promise对象。
      

• Promise的then内部可以做三种事情

  • return另一个promise
  • return一个同步值(或undefined)
  • 因为JS函数无法返回值时，默认返回undefined，所以只是执行一个函数，不return,默认就返回undefined。返回一个同步值在Promise中会同步代码包裹为promise，得到的还是一个promise。返回一个同步值是有用处的，例如：一个异步值在内存中做了缓存，可以直接从内存中拿到该值，直接返回，不必再调用异步接口。
  • throw一个同步异常

• Promise的一些写法

  • new Promise(function(resolve,reject){
    	resolve(syncValue);
    }).then(...)
    //可以写为
    Promise.resolve(syncValue).then(...)
    //一个错误也可以写成
    Promise.reject(new Error('...'))
    这样无论成功或失败都可以在后面的then和catch中捕获和继续操作
    

  • Promise的then中只能传递函数，如果为其他类型，例如另一个Promise，会被解释为null，此时Promise的值传递会穿透

  • Promise.resolve('foo').then(Promise.resolve('bar')).then(function(result){
    	console.log(result);
    });
    //会被解释为：
    Promise.resolve('foo').then(null).then(function(result){
    	console.log(result);
    });
    
    第一个resolve的值会穿透到then,打印出foo
    

• then的四种写法的区别

  • //写法一
    f1().then(function(){
    	return f2();
    });
    //写法二
    f1().then(function(){
    	f2();
    });
    //写法三
    f1().then(f2());
    //写法四
    f1().then(f2)
    
    写法1和4完全等价，f1的值能传递到f2，f2的返回值也能继续向后面的then传递；
    写法2相当于默认return undefined，无法向后面的then传递值；
    写法3能够向后面传递f2的值。
    

• Promise的调用方法

  • 每个then返回一个新的promise调用，这种写法被称为composing promises 组成式promises

  • promise1.then(function(){
    	return promise2;
    }).then(function(){
    	return promise3;
    }).then(function(){
    	return promise4;
    }).catch(function(err){
    	console.log(err)
    })
    

• Promise的并行执行

  • 由于promise一旦被创建，就会立即执行，所有拿到一个Promise数组的时候，其中的promise必然全部开始执行了。因此要让一系列promise顺序执行，只能将promise放在一个函数中，在要执行的时候才去创建它，就是一个工厂函数，promiseFactory.promise并行执行的代码:

  • function executeSequentially(promiseFactories){
    	var res = Promise.resolve();
    	promiseFactories.forEach(function(promiseFactory){
    		res = res.then(promiseFactory);
    	});
    	return res;
    }
    //工厂函数只是简单的创建一个promise
    function promiseFactory(){
    	return createAPromise();
    }
    

• 实现一个promise版本的ajax

  • function Http(){}
    
    Http.prototype = {
    	get:function(opts){
    		return this.ajax(opts);
    	},
    	post:function(opts){
    		return this.ajax(opts);
    	},
    	ajax:function(opts){
    		return Promise(function(resolve,reject){
    			var xhr = window.XMLHttpRequest ? new XMLHttpRequest()：new ActiveXObjext('...');
    			var {url,method,data,async,success,fall} = options;
    			var sendBody = null;
    		})
    	}
    }