Promise 的使用（通俗理解）

Promise

Promise是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。
Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

例子： 动态引入 js，导出一个函数，触发函数，方法存在，直接返回resolve()，否则 把js添加到 页面的head上，js加载完毕，返回resolve()。

const src = 'https://cdn.staticfile.org/html2canvas/0.5.0-beta4/html2canvas.min.js'
const label = (src)=>{
	let srcipt = document.createElement('script');
	srcipt.src= src;
	return srcipt
}
let script = label(src);

export default function (doc,opt) {
	return new Promise((resolve, reject) => {
		if(!window.html2canvas) return resolve()
		document.head.addendChild(script)
		script.onload = ()=>{
			resolve()
		}
	}).then(()=>{
		return window.html2canvas(doc, option)
	})
}

链式操作的用法

function runAsync1(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务1执行完成');
            resolve('异步任务1返回数据');
        }, 1000);
    });
    return p;            
}
function runAsync2(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务2执行完成');
            resolve('异步任务2返回数据');
        }, 2000);
    });
    return p;            
}
function runAsync3(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务3执行完成');
            resolve('异步任务3返回数据');
        }, 2000);
    });
    return p;            
}

runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return '直接返回数据';  //这里直接返回数据
})
.then(function(data){
    console.log(data);
});

输出
异步任务1执行完成
异步任务1返回数据
异步任务2执行完成
异步任务2返回数据
直接返回数据

all的用法

Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});

输出
异步任务1执行完成
异步任务2执行完成
异步任务3执行完成
[“异步任务1返回数据”,“异步任务2返回数据”,“异步任务3返回数据”]

race的用法

race 执行最先返回的回调

function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
            resolve(img);
        }
        img.src = 'xxxxxx';
    });
    return p;
}

function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('图片请求超时');
        }, 5000);
    });
    return p;
}

Promise
.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

equestImg函数会异步请求一张图片，我把地址写为"xxxxxx"，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。