介绍ES6中的Promise及其使用场景

一、概念

Promise，是异步编程的一种解决方式，比传统的解决方案（回调函数）更加合理和更加强大。

优点：

1、链式操作减低了编码难度

2、代码可读性明显增强

二、状态

Promise 对象的三种状态：

1、pending（准备中）

2、fulfilled（已成功）

3、rejected（已失败）

三、语法

 let p1 = new Promise((resolve, reject) => {
        // resolve和reject是Promise内提供的2个函数, 用于回调返回结果到外面
        resolve(成功结果) // 触发.then()小括号里函数体执行
        reject(失败结果) // 触发.catch()小括号里函数体执行
    })

    p1.then((成功结果变量名) => {

    }).catch((失败结果变量名) => {

    }).finally(()=>{
       // 一定会执行的代码
    })

四、流程

 

五、实例方法

Promise 构建出来的实例存在以下方法：

.then()

.catch()

.finally()

then 是实例状态发生改变时的回调函数，第一个参数是 fulfilled 状态的回调函数，第二个参数是rejected 状态的回调函数。

catch 是用于指定发生错误时的回调函数，一般来说，使用 catch 方法代替 then() 第二个参数

catch() 方法中，还能抛出错误，通过后面 catch 方法捕获到

finally() 方法用于指定不管 Promise 对象最后状态如何，都会执行的操作

六、构造函数方法

Promise 构造函数存在以下方法：

.all()

.allSettled()

.race()

.resolve()

.reject()

.try()

Promise.all() 方法用于将多个 Promise 对象，合并成一个新的 Promise 对象。

Promise.allSettled() 方法接受一组 Promise 对象作为参数，包装成一个新的 Promise 对象。

Promise.race() 方法将数组所有 Promise 对象的改变状态进行比赛，p1，p2，p3 中率先改变状态的，p 的状态跟着改变，率先改变的 Promise 对象的返回值则传递给 p 的回调函数。

const p = Promise.race([p1, p2, p3]);

Promise.resolve() 方法将现有对象转为 fulfilled 状态的 Promise 对象。

Promise.rejected() 方法将现有对象转为 rejected 状态的 Promise 对象。

七、使用场景

  将图片的加载写成一个 Promise ，一旦加载完成，Promise 的状态就发生改变

const preloadImage = function (path) {
  return new Promise(function (resolve, reject) {
    const image = new Image();
    image.onload  = resolve;
    image.onerror = reject;
    image.src = path;
  });
};

  通过链式操作，将多个渲染数据分别给个 then ，让其各司其职

// 各司其职
getInfo().then(res=>{
    let { bannerList } = res
    //渲染轮播图
    console.log(bannerList)
    return res
}).then(res=>{
    
    let { storeList } = res
    //渲染店铺列表
    console.log(storeList)
    return res
}).then(res=>{
    let { categoryList } = res
    console.log(categoryList)
    //渲染分类列表
    return res
})

  通过 all() 实现多个请求合并在一起，汇总所有请求结果，只需设置一个 loading 即可

function initLoad(){
    // loading.show() //加载loading
    Promise.all([getBannerList(),getStoreList(),getCategoryList()]).then(res=>{
        console.log(res)
        loading.hide() //关闭loading
    }).catch(err=>{
        console.log(err)
        loading.hide()//关闭loading
    })
}
//数据初始化    
initLoad()

  通过 race() 可以设置图片请求超时

//请求某个图片资源
function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
           resolve(img);
        }
        //img.src = "https://b-gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg"; 正确的
        img.src = "https://b-gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg1";
    });
    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);
});