Promise

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

1 什么是异步？

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

Promise的作用

• Promise 解决异步编程的痛点

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

Promise的基本用法

1let ajax = function(){
2        console.log('执行');
3
4        return new Promise(function(resolve,reject){
5            setTimeout(() => {
6                resolve()
7            }, 1000);
8        })
9        
10    }
11
12
13    ajax().then(function(){
14        console.log('timeout1');
15        
16        return new Promise(function(resolve,reject){
17            setTimeout(() => {
18                resolve()
19            }, 2000);
20        })
21    }).then(function(){
22        console.log('timeout2');
23        
24    })
25

• 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) } }) }

  1function showOneImg(img){
  2    let p = document.createElement('p')
  3    p.appendChild(img)
  4    documnet.body.appendChild(p)
  5}
  

  //加载多张图片，第一张加载完成后，结束加载过程 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)