JS_ES6异步处理语法promise

Promise

Promise 是一个对象、是一个构造函数，可以生成一个Promise实例，是一个异步过程，它可以将异步操作以同步操作的流程表达出来。实例一：

var  p=new Promise(function(resolve,reject){
    var i=3;
    if(i>2){
        resolve();
    }else{
        reject();
    }
})
p.then(function(){

},function(){
    
}); */

在Promise中resolve和reject，只能被调用一次，不能同时调用；
在Promise中有一个状态，初始是准备状态pending；
当执行resolve或者reject时，这个Promise当中状态就会被修改；
如果当前状态不是准备状态时，就不会再执行resolve或者reject；
当执行reject后，状态会被变为rejected状态；当执行resolve后，状态变为resolved状态。
Promise是一个异步过程，实例二：

console.log("a");
var p=new Promise(function(resolve,reject){
    console.log("b");
    resolve();
})
console.log("c");
p.then(function(){
    console.log("d");
},function(){
});
console.log("e");

它的打印顺序是 a b c e d 。
Promise的resolve或reject它是异步的过程。
简单的应用，拿图片来说(实例三)：

function loadImage(src){
    var p=new Promise(function(resolve,reject){
        var img=new Image();
        // resolve 是表示正确完成时执行的函数
        img.onload=function(){
            resolve(img);
        }
        // reject 时表示错误时执行的函数
        img.onerror=function(){
            reject(src);
        }
        img.src=src;
    });
    return p;
}
var p=loadImage("./img/3-.jpg");
var s=p.then(function(img){
    console.log(img.width);
    // 如果在这里没有使用return 返回其他内容，会自动返回一个空的Promise，没有参数
},function(src){
    console.log(src+"加载错误");
});

创建一个Promise即p，把创建好的p返回出来，增加两个事件，如果图片加载成功，就执行resolve，打印图片宽度，如果加载失败，就执行reject，打印src加载错误；
如果有return返回值，假设加载图片都存在，即不会加载失败，实现图片3加载完成后，再加载图片4、5等，连缀式写法：

loadImage("./img/3-.jpg").then(function(img){
    console.log(img.width,img.src);
    return loadImage("./img/4-.jpg");	//返回一个promise
}).then(function(img){
    console.log(img.width,img.src);
    return loadImage("./img/5-.jpg");
}).then(function(img){
    console.log(img.width,img.src);
    return loadImage("./img/6-.jpg");
});

实现N个图片的预加载：

var arr=[];
for(var i=3;i<80;i++){
    var p=loadImage("./img/"+i+"-.jpg");
    arr.push(p);
}
Promise.all(arr).then(function(list){
    list.forEach(item=>{	//查看结果
        console.log(item.width,item.src);
    })
});

Promise.all()将Promise对象数组按照顺序异步全部完成后再then的第一个函数中，传入完成结果。
用生成器函数实现图片预加载：

function* fn(){
    yield loadImage("./img/3-.jpg").then(function(img){
        console.log(img);
    });
    yield loadImage("./img/4-.jpg").then(function(img){
        console.log(img);
    });
    yield loadImage("./img/5-.jpg").then(function(img){
        console.log(img);
    });
}
for(var value of fn()){
    // console.log(value);
}

异步过程转为同步过程。
async异步实现图片预加载：

async function fn(){
    var arr=[];//放入预加载的图片
    for(var i=3;i<80;i++){
        await loadImage(`./img/${i}-.jpg`).then(function(img){
            arr.push(img);
        });
    }
    console.log(arr);//查看结果
}
fn();

将异步转换为阻塞式同步，fn 这个函数使用async 表示这个函数是一个异步函数，这个函数中就可以使用await ，await作用就是让异步变为同步等待。异步变成了阻塞式等待，当异步全部完成时，再继续向后运行，async函数中的await后面只能跟的时Promise对象，async函数执行后返回的是一个Promise对象。