Promise

• promise是异步编程的一种解决方案

1 什么是异步？

异步模式，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。 "异步模式"非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。

Promise的作用

• Promise 解决异步编程的痛点

  let ajax = function(){ console.log('执行') return new Promise(function(res,rej){ setTime(function(){ res() },1000) }) }

Promise的基本用法

let ajax = function(){
        console.log('执行');

        return new Promise(function(resolve,reject){
            setTimeout(() => {
                resolve()
            }, 1000);
        })
        
    }


    ajax().then(function(){
        console.log('timeout1');
        
        return new Promise(function(resolve,reject){
            setTimeout(() => {
                resolve()
            }, 2000);
        })
    }).then(function(){
        console.log('timeout2');
        
    })

• Promise.all

  function loadImg(src){ return new Promise((resolve,reject)=>{ let img = document.createElement('img'); img.src = src; img.onload = function(){ resolve(img) } img.onerror=function(err){ reject(err) } }) } function showImgs(imgs){ imgs.forEach(img => { document.body.appendChild(img) }); } //Promise.all,实现多张图片全部加载完成后，再显示， Promise.all([ loadImg("http://i4.buimg.com/567571/d1ef0720bea6832.png"), loadImg("http://i4.buimg.com/567571/d1ef0720bea6832.png"), loadImg("http://i4.buimg.com/567571/d1ef0720bea6832.png"), ]).then(showImgs)//

• Promise.race

  function loadImg(src){ return new Promise((resolve,reject)=>{ let img = document.createElement('img'); img.src = src; img.onload = function(){ resolve(img) } img.onerror=function(err){ reject(err) } }) } function showOneImg(img){ let p = document.createElement('p') p.appendChild(img) documnet.body.appendChild(p) } //加载多张图片，第一张加载完成后，结束加载过程 Promise.race([ loadImg("http://i4.buimg.com/567571/d1ef0720bea6832.png"), loadImg("http://i4.buimg.com/567571/d1ef0720bea6832.png"), loadImg("http://i4.buimg.com/567571/d1ef0720bea6832.png"), ]).then(showOneImg)