ES6中Promise的入门(结合例子)

一、Promise的前言

解决回调地狱

//以往回调方式
函数1(function(){
    //代码执行...(ajax1)

    函数2(function(){
        //代码执行...(ajax2)

        函数3(function(data3){
              //代码执行...(ajax3)
        });
        ...
    });
});

//Promise回调方式:链式调用,可构建多个回调函数。
//例如请求一个ajax之后,需要这个拿到这个ajax的数据去请求下一个ajax
promise().then().then()...catch()

当页面逻辑复杂起来的时候,管理起来特别不容易。

为解决这种问题,CommonJS提出Promise概念.

• 从字意去理解:Promise表示一种承诺,它拥有由浏览器引擎提供的两个函数:resolve和reject.通过具体情况调用相应的函数,然后再通过then写上对应的回调函数。
• 从构建代码理解:

//首先要创建Promise实例
let promise = new Promise( (resolve, reject) => {
    //执行相应代码并根据情况调用resolve或reject
    ...
})

//在promise的then方法中执行回调
promise.then(function(){
        //第一个参数是返回resolve时,回调执行的函数
    },function(){
        //第二个是回调返回reject时,回调执行的函数
    }
}

解释一下上面几个概念:

• Promise: Promise有三个状态:pending(等待)、resolve(完成)、 reject(拒绝)
  
  两种状态改变方式:pending => resolve, pending => reject
  
  在构建Promise实例调用resolve或reject就是状态改变的时候。当状态改变的时候,其方法then就会执行对应状态的回调函数。

• resolve: then方法的第一个参数,通常作为事件成功的回调函数

• reject: then方法的第二个参数,通常作为事件失败的回调函数,也可以作为catch的参数出现

二、Promise入门小例子

定时器调用

1. 最简单的例子

const promise = new Promise(function(resolve, reject){
    setTimeout(resolve,1000);//1s后状态变更为resolve,调用then方法的第一个参数
})

promise.then(function(){
  console.log('resolve:成功回调函数')
},function(){
  console.log('reject:失败回调函数')
})

1. 也可以写成回调函数的方式,并把reject状态的回调函数放到catch里

const promise = new Promise((resolve, reject) => {
    setTimeout(reject,1000);
})

promise.then( () => {
    console.log('resolve:成功回调函数')
}).catch(() => {
    console.log('reject:失败回调函数')
})

1. 请求事件通常会附带数据给回调函数。要传递参数,只需要附带在函数后面即可
   
   注意!传多个数据需要通过数组传递

const promise = new Promise((resolve, reject) => {
    setTimeout(reject,1000,'我是value值');
})

promise.then((value) => {
    console.log('resolve:' + value)
}).catch((value) => {
    console.log('reject:'+ value)
})

传多个参数➡

//第一种,可以看到单个传值是无效的
const promise = new Promise((resolve, reject) => {
    setTimeout(resolve,1000,'参数1','参数2');
})

promise.then((value1,value2) => {
    console.log('value1:' + value1)     //value1:参数1
    console.log('value2:' + value2)     //value2:undefined
}).catch((value) => {
    console.log(value)
})

//第二种:数组传值
const promise = new Promise((resolve, reject) => {
    setTimeout(resolve,1000,['参数1','参数2']);
})
promise.then((value1) => {
    console.log('value1:' + value1)     //value1:参数1,参数2
}).catch((value) => {
    console.log(value)
})

以上就是我对Promise的理解啦!是一些Promise入门的简单知识点.

想深入了解的话可以看看阮一峰老师的《ES6入门》:

http://es6.ruanyifeng.com/#docs/promise