[ES6] 细化ES6之 -- Promise对象

Promise对象是什么

Promise对象是什么

ES6新增了Prormnise对象，该对象允许对延迟和异步操作流程进行控制。一个Promise对象就是一个代表了异步操作最终完成或者失败的对象。

开发人员可以使用由其他函数创建并返回的Promise 对象。Promise对象本质上就是一个绑定了回调的对象，而不是将回调传进函数内部。

一个Promise有以下几种状态:

• pending:初始状态，既不是成功，也不是失败状态。
• fulfilled:意味着操作成功完成。
• rejected:意味着操作失败。

 

创建Promise对象

let promise = new Promise( function( resolve，reject){})

• 当前的构造函数Promise接收一个回调函数 – function(resolve,reject)[}
  • resolve - 是一个函数，将Promise的状态改为fulfilled(完成)
  • reject - 是一个函数，将Promise的状态改为rejected（失败)

//Promise的初始化状态 – 既不成功，也不失败
let promise = new Promise( ( resolve,reject)=>{
    setTimeout( ()=> {
        resolve('测试成功')
    },200)
})
//将Promise状态改变 - 要么成功,要么失败
promise.then( (value)=> {
    console.log(value);
})

// Promise对象由其他函数创建并返回
function fn(){
    return new Promise((resolve,reject) => {
        setTimeout(()=>{
            resolve('测试成功啦..· ');
        },200)
    });
}

 

Promise对象的约定

• 在JavaScript事件队列的当前运行完成之前，回调函数永远不会被调用。

• 通过.then形式添加的回调函数，甚至都在异步操作完成之后才被添加的函数，都会被调用。

• 通过多次调用.then，可以添加多个回调函数，它们会按照插入顺序并且独立运行。

Promise最直接的好处就是链式调用

 

Promise对象的链式操作

常见的需求就是连续执行两个或者多个异步操作。

//创建Promise对象
let promise = new Promise( ( resolve,reject)=>{
    setTimeout( ()=> {
        resolve('测试成功')
    },200)
})

//then()方法返回一个新的Promise对象
let promise2 = promise.then((value) => {
    console.log(value); // 测试成功
})
//promise和promise2是两个对象
console.log(promise, promise2);// Promise { <pending> } Promise { <pending> }
console.log(promise2 === promise);// false
console.log({}==={})// false

 

Promise对象原型的方法

then()方法

用于为Promise 对象添加状态改变时回调函数

 

catch()方法

返回一个Prornise 对象,并且处理拒绝的情况。

//创建Promise对象
let promise = new Promise( ( resolve,reject)=>{
    setTimeout( ()=> {
        resolve('测试成功')
        // reject('测试失败 ')
    },200)
})
// then()方法 - 当改变Promise状态时执行回调函数(成功)
promise.then((value) => {
    console.log(value);//reslove
}).catch((value)=>{
    console.log(value);//reject
})

 

finally()方法

返回一个 Promise 对象，在执行 then()和 catch()后，都会执行finally 指定的回调函数

//创建Promise对象
let promise = new Promise( ( resolve,reject)=>{
    setTimeout( ()=> {
        resolve('测试成功')
        // reject('测试失败 ')
    },200)
})
// then()方法 - 当改变Promise状态时执行回调函数(成功)
promise.then((value) => {
    console.log(value);//reslove
}).catch((value)=>{
    console.log(value);//reject
}).finally(()=>{
    console.log('finally');// finally
})

 

Promise对象的方法

Promise.all()方法

用于将多个Promise 对象，包装成一个新的Promise 对象。

let promise1 = new Promise(()=>{

})
let promise2 = new Promise(()=>{

})
let promise3 = new Promise(()=>{

})
// Promise.all()方法将多个Promise对象整合成一个Promise对象
Promise.all([promise1,promise2,promise3])

 

Promise.race()方法

将多个 Promise 实例，包装成一个新的 Promise 实例

一旦迭代器中的某个承诺解决或拒绝，返回的Promise就会解决或者拒绝

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('one')
    },100)
})
let promise2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('two')
    },200)
})
//race()方法 – 是以某个Promise对象的状态改变时，表示整合后的Promise对象成功或失败
Promise.race([promise1,promise2]).then((value)=>{
    console.log(value);//one
});

Promise.resole()方法

返回一个以给定值解析后的Promise 对象。

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

 

Promise.reject()方法

返回一个带有拒绝原因reason参数的Promise 对象。

const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s) {
  console.log(s)
});
// 出错了

 

Promise对象的应用

加载图片

可以将图片的加载写成一个Prormise，一旦加载完成，Promise 的状态就发生变化。

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

 

通过Ajax加载图片

function imgLoad(url) {
    return new Promise(function (resolve,reject) {
        var request = new XMLHttpRequest()
        request.open('GET',url)
        request.onload = function () {
            if (request.status === 200){
                resolve(request.response)
            }else {
                reject(Error('error code:'+request.statusText))
            }
        }
        request.onerror = function () {
            reject(Error('It is a network error'))
        }
        request.send()
    })
}

 

Promise对象的原理剖析

Promise执行流程