异步编程Promise

一、Promise

（一）promise对象

   概述：

• promise是异步编程的一种解决方案。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息

• Promise是一个构造函数，其原型上有then、catch方法，对象上有reject、resolve方法

• Promise主动产生数据 自己内部产生数据  用then(异步)函数取数据

   使用：通过new关键字创建Promise对象

• resolve：异步操作执行成功后的回调函数

• reject：异步操作执行失败后的回调函数

var p=new Promise()
//p是一个特殊对象 它内部数据是自己产生的 取数据用then方法来取
var p1=new Promise(function(resolve,reject){
//resolve,reject都是一个函数 回调函数
    resolve(100) //p1内部产生了业务正确的数据100 resolve调用代表触发了p1对象内部产生数据
    reject(404)  //p1内部产生了业务错误的数据404 reject调用代表触发了p1对象内部产生数据
                 //resolve,reject只能运行一个 不能同时运行
})
p1.then(function(data){
        console.log(data)
 },function(err){
        console.log(err)
})  

  *除了reject() 可以触发promise产生的错误 还可以直接抛出异常：

var p1=new Promise(function(resolve,reject){
   var rdata = {
			state: 1,
			info: "此处是业务数据"
   }
   if (rdata.state == 404) {
			throw "业务数据是错的"   //代替了reject()
   } else if (rdata.state == 1) {
			var err=new Error("正确的业务对象 但是它是个js中的err类型的对象")
			resolve(err)
   }
})	
p1.then(function(data){
        console.log(data)
 },function(err){
        console.log(err)
})  	

（二）then方法

   1.概述：

    then方法是函数  then里面的函数是回调函数 

• then接收一个参数函数的参数data将会拿到调用resolve时传的的参数
• then函数的返回值是新的promise对象
•        若then传入的回调函数的返回值是一个promise对象 就是该对象
•        若不是就会把函数的结果包装为一个生成数据了的promise对象
• promise内的函数是同步函数  但then函数是异步非阻塞函数

var p1=new Promise(function(n1,n2){
        n1(200)
})
var re=p1.then(function(){
        return 100
})
//re是一个新的promise对象 这个新的promise内部的数据是100
re.then(function(data){
     console.log(data)
})

  2.then方法获取数据：

• then方法可以接受两个参数，第一个对应resolve的回调，第二个对应reject的回调

p1.then(function(data){
        console.log(data)
 },function(err){
        console.log(err)
}) 

（三）catch方法 

• 捕获错误信息 和then的第二个参数一样，用来指定reject的回调

p1.then((data)=>{       //此时then只传一个函数
     console.log(data)
}).catch((err)=>{
     console.log(err)
})

作用：在执行resolve的回调时，抛出了异常（代码出错了）并不会报错卡死 js，而是会进到这个catch方法中

  注意：在链式调用过程中只要有一个捕获 把错误处理了 就不会报错

二、任务队列和事件循环

（一）任务队列

  1.概念

• 任务指的是js代码中的运行的代码

  2.分类

• 同步任务
• 异步任务

//同步任务
function fn(){}
var a=new Array()
console.log(123)
var p1=new promise((n1,n2)=>{n1(100)})
//异步任务
setTimeout(fn,1000)
p1.then(fn)

 注：同步任务执行先于异步任务

  3.异步任务

    分类：

• 异步宏任务 ：全局脚本和计时器
• 异步微任务 ：then

 注：宏任务先于微任务执行

console.log(4)   //同步任务
setTimeout(()=>{console.log(1)},10)    //异步宏任务
setTimeout(()=>{console.log(2)},10)    //时间相同 先写的先打
var p1=new promise((n1,n2)=>{n1(100)}) //同步任务 
p1.then()=>{console.log(3)}   //异步微任务
console.log(5)  //同步任务

//打印顺序 4 5 3 1 2 

   4.任务执行过程

   脚本运行 执行第一个宏任务:

         1. 先执行同步任务

         2.添加新的宏任务到队列中 添加新的的异步微任务

         3.执行异步微任务

（二） 事件循环

   1.概念

• 任务开启后，内部执行的时候可能会有新的任务

   2.事件循环过程 

1. 先执行第一轮宏任务（脚本）中的代码：同步～微任务～下一轮宏任务中的代码
2. 宏任务中：同步～微任务～下轮排队的宏任务
3. 下轮排队的宏任务中：执行同步～执行微任务～遇到宏任务继续排队～执行下轮排队的宏任务
4. 下轮排队的宏任务中：执行同步～执行微任务～遇到宏任务继续排队～执行下轮排队的宏任务
5. 下轮排队的宏任务中：执行同步～执行微任务～遇到宏任务继续排队～执行下轮排队的宏任务 
6. 循环...          

 笔试题 :     

setTimeout(() => {
      console.log(0);
});
new Promise(resolve => {
        console.log(1);
        setTimeout(() => {
               resolve();
               var p1 = new Promise((n1, n2) => {n1(20)})
               p1.then(() => console.log(2));
               console.log(3);
        });
        new Promise((n1, n2) => {
                n1(20)
        }).then(() => console.log(4));
        }).then(() => {
            console.log(5);
            var p2 = new Promise((n1, n2) => {
                n1(20)
            })
            p2.then(() => console.log(8));
            setTimeout(() => console.log(6));
           });
console.log(7);
//打印结果顺序 1 7 4 0 3 5 2 8 6
/*
解析：
先执行第一轮宏任务（脚本）中的代码：
同步：new Promise(resolve => {console.log(1);...} 、console.log(7) 、new Promise((n1, n2) => {n1(20)})
微任务：new Promise((n1, n2) => {n1(20)}).then(() => console.log(4));
下轮排队的宏任务:setTimeout(() => {console.log(0);});

第二轮宏任务中的代码：
同步：console.log(0);
微任务：无
下轮排队的宏任务:setTimeout(() => {
               resolve();
               var p1 = new Promise((n1, n2) => {n1(20)})
               p1.then(() => console.log(2));
               console.log(3);
               });

第三轮宏任务中的代码：
同步：var p1 = new Promise((n1, n2) => {n1(20)}) 、console.log(3);
微任务： resolve()触发-->Promise对象.then(() => {console.log(5);...})
 p1.then(() => console.log(2));
 p2.then(() => console.log(8));
下轮排队的宏任务:setTimeout(() => console.log(6));

第四轮宏任务中的代码：
同步：console.log(6)；
运行结束
*/