promise —— async & await

Promise

Promise是ES6新出的一个用来处理异步操作的对象。能够让我们更优雅的进行异步调用。
大致结构如下：

var promise = new Promise(function(resolve, reject){
    // ... 一些异步操作，并且这些异步操作在实例化的时候就执行了，要注意！⚠️通常选择把newPromise对象给包在函数里
    
    if (/* 异步操作成功 */) {
        resolve(value);  //Promise的状态发生改变：Pending -> Fulfilled
    } else {
        reject(error);   //Promise的状态发生改变：Pending -> Rejected
    }
})
promise.then(function (value) {     //then 和 catch 是执行异步回调操作的
            console.log('success:' + value);  //then里可以继续执行Promise对象，从而实现链式异步操作
        }).catch(function(error){
            console.log('error:' + error);
        });

Promise实例一

//创建一个Promise实例，获取数据。并把数据传递给处理函数resolve和reject。需要注意的是Promise在声明的时候就执行了。
var getUserInfo=new Promise(function(resolve,reject){
    $.ajax({
        type:"get",
        url:"index.aspx",
        success:function(){
            if(res.code=="ok"){
                resolve(res.msg)  //在异步操作成功时调用
            }else{
                reject(res.msg)   //在异步操作失败时调用
            }
        }
    });
})

//另一个ajax Promise对象，
var getDataList=new Promise(function(resolve,reject){
    $.ajax({
        type:"get",
        url:"index.aspx",
        success:function(res){
            if(res.code=="ok"){
                resolve(res.msg)   //在异步操作成功时调用
            }else{
                reject(res.msg)    //在异步操作失败时调用
            }
        }
    });
})

//Promise的then,catch方法
getUserInfo.then(function(ResultJson){
    //通过拿到的数据渲染页面
}).catch(function(ErrMsg){
    //获取数据失败时的处理逻辑
})

//Promise的all方法，等待数组中的所有promise对象都完成执行
Promise.all([getUserInfo,getDataList]).then(function([ResultJson1,ResultJson2]){
    //这里写这两个ajax都成功返回数据才执行的业务逻辑
})

总结：Promise对象就是优雅的注册（包在函数func里）/执行（func.then().catch()）异步操作，说明这个异步操作后续成功/失败时进行的哪些行为

async & await

async : 异步
await : async wait

async：

作为一个关键字放到函数前面，用于表示函数是一个异步函数（内部有一些异步操作）。
异步函数也就意味着该函数的执行不会阻塞后面代码的执行。
为什么不会阻塞呢？因为async是异步任务，加入到任务队列里。
作用：输出的是一个（封装的）Promise对象（返回Promise.resolve(return的直接量/undefined)）

await：

await是个运算符
await只能用于async 函数之中，如果用在普通函数，就会报错。
** 根据await后的东西（函数表达式或 Lambda）：**
如果它wait到的不是一个 Promise 对象，那 await 表达式的运算结果就是它等到的东西。
如果它wait到的是一个 Promise 对象，await 就忙起来了，它会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。

所以！ await 必须用在 async 函数里，因为async 函数调用不会造成阻塞（会挂起到任务队列），然后将内部所有的阻塞都被封装在一个 Promise 对象中（return出去）异步执行。

async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。

整理一下上边这段话，不用深究，大致理解怎么用就行：
async内部await确实阻塞等待获取resolve数据
async外部下边的代码是照常执行，并没有阻塞的！这就是async的作用价值

async function testResult() {  
    let first = await doubleAfter2seconds(30);  //在后台梗2秒
    let second = await doubleAfter2seconds(50);  //继续梗2秒
    let third = await doubleAfter2seconds(30);	//继续梗2秒
    console.log(first + second + third);  //6秒后，控制台输出220, 我们可以看到，写异步代码就像写同步代码一样了，再也没有回调地域了
    //否则的话，要分别获取到每个数据后进行回调获取下一个数据
}

补充：

JS的同步异步概念
javascript语言是一门“单线程”的语言
所有任务可分为同步任务和异步任务
前者在主线程的执行栈依次执行，后者在主线程触发后挂起执行，有事件反馈时将事件放入“任务队列”，当主线程任务执行完调取任务队列中的事件完成。
js中常见异步：定时器、ajax、事件绑定、回调函数、async await、promise
特点：耗时长，历时长
处理异步的几种方法:
设置成异步模式，引擎能够自动识别进行异步提高效率

	1 — 回调函数 A(B)场景：A耗时长 B等A的执行结果才执行
			（也有同步回调：即在A里边调用B）

//vue框架的应用
//用户权限验证实例：
created(){//在这个钩子函数中取执行获取数据的方法，将验证方法作为回调传入
  getdata(check)
 }
 methods:{
   function getdata(callback){//向后端请求用户信息
    //这里我们假设是从后端获取数据
    setTimeout(function(){
     //假设我们获取到数据info
     var info = {
      "id":1,
      "name":'张三'
     }
     //得到数据以后执行函数方法
     callback(info)//这个就是回调函数，得到用户信息后去验证他的权限
    },1000)
 }
function check(data){//验证用户权限
  if(data.id==1){
   console.log('验证成功，可以通过')
  }else{
   console.log('验证失败，禁止通行')
  }
}
 }

	2 — 事件监听   
		几种事件监听方法：（1）onclick方法 （只能绑定一个事件）
						  				（2）addEvenListener方法（elment.addEvenListener("click",handler1,false);
						  				能给同一个对象绑定多个事件 最后一个参数决定了冒泡顺序 false时表示由里向外）
						  				
	3 — 发布/订阅模式
		利用jquery插件实现事件的订阅信号操作，决定事件啥时候执行
		
	4 — promise对象
		目的是为了异步编程提供统一接口
		promise是一种模式，promise可以帮忙管理异步方式返回的代码。
		封装事件会在promise成功或者失败后运行