Promise史诗级详解

不爱青椒
186 阅读4分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Promise-整体说明

它是一个ES6提出一个新语法，用来优化异步代码的写法。

  • 在前端领域是我们必须要会的一个内容
  • 后续的课程中也会多次使用

promise：承诺。

代码填空，并完成指定功能。

  • 生活中.它是用来表述 对将来要发生的事情的肯定。 例如 ： 高中生说，老师，我会考上一所好大学的；销售员说，老板，我一定会签下大单的；程序员说，老妈，我过年一定会带个女朋友回来的。
  • 在ES6中，它是新增的构造器，用来优化实现异步操作。在没有它之前，javascript中的异步处理，大多是利用回调函数来实现的。典型的几种如下:（1）setTimeout （2）ajax （3）nodejs中的文件读取。现在有了promise，就可以对这些异步操作进行改写了。
  • 学习内容
  • 构造器
  • 三种状态和值
  • 经典调用格式

小小一道面试题

代码填空，并完成指定功能。

function sleep(time){
    // 请写出你的代码
}

sleep(2000).then(()=>{
    console.log("后续操作")
})
console.log(2);

目标 是让sleep 的功能与setTimeout一样：就是等2000毫秒之后再执行后续操作。

参考代码如下：

	return new Promise(function(resolve,reject){
        // 异步操作，根据执行结果，决定是否调用 resolve,reject
        setTimeout(function(){
            resolve()
        }, time)
    })
}

Promise的基本使用

经典格式

​

构造器

  // 执行异步代码
  // 调用resolve,或者reject
});
console.dir(p1)

要点：

  • 构造器必须要给定一个参数，如果不给就是会报错。例如，new Promise() 报错的信息是： Promise resolver undefined is not a function
  • 构造器的实参是一个函数，这个函数的特殊之处在于它有两个形参(resolve,reject)，这两个形参也是函数。在格式上，也可以采用箭头函数来改写。例如：var p1 = new Promise((resolve,reject)=>{})。
  • 在函数体的内部， 一般会执行异步代码，然后根据情况来调用resolve()或者是reject() 。调用resolve或者是reject后会产生什么样的后果，在后面小节介绍。 当然了，再次强调一下resolve和reject只是形参名，可以改写成其它的。

\

三种状态和值

一个Promise对象的状态可能是如下三种之一：pending,resolved,rejected 。下面分别介绍。

初始态pending

pending。它的意思是 "待定的，将发生的"，相当于是一个初始状态。 创建Promise对象时，且没有调用resolve或者是reject方法，相当于是初始状态。这个初始状态会随着你调用resolve，或者是reject函数而切换到另一种状态。

var p = new Promise((ok,err)=>{ console.info('发呆.....' )})
console.dir(p)

这个初始状态就是你对别人说出承诺的那个瞬间，此时，大家都不知道这个承诺是否能兑现。

成功态resolved

也有叫fulfilled的。

resolved。表示解决了，就是说这个承诺实现了。 要实现从pending到resolved的转变，需要在 创建Promise对象时，在函数体中调用了resolve方法(即第一个参数)。

var p = new Promise((resolve,reject)=>{ resolved();})
console.dir(p)

注意，上面的resolve和reject仅是形参名而已。

失败态rejected

rejected。拒绝，失败。表示这个承诺没有做到，失败了。要实现从pending到rejected的转换，只需要在创建Promise对象时，调用reject函数。

var p = new Promise((resolve,reject)=>{ reject()} )
console.dir(p)

三种状态小结

  1. 状态是可转化。

最初创建promise对象时，默认状态是pending，如果在函数体内部调用了第一个参数对应的函数，则状态变成了resolved；如果调用了第二个参数对应的函数，则状态变成了rejected。

 pending -----  resolve() --> resolved;
 pending -----  reject()  --> rejected;
  1. 状态转换是不可逆的。

一旦从pending ---> resolved（或者是rejected），就不可能再回到pending，也不能由resolved变成rejected。

promise的值

一个promise对象除了状态之外，还有promiseValue。在构造器中，这个值在调用resolve和reject方法时传入。

例如：

var p = new Promise( (resolve,reject) => { resolve(123); } );
//  此时，prommise对象p的状态是 resolved，值是123。
console.dir(p)

var p = new Promise( (resolve,reject) => { reject(123); } );
//  此时，prommise对象p的状态是 rejected，值是123
console.dir(p)

promise的兑现

在构造器的函数体中，一旦状态发生了变化，就会进行then，或者是catch中去，同时把promiseValue传入对应的函数。

具体来说：

  • 状态从pending变成resolved，进入then中，调用函数，并传入此时的promiseValue（就是调用resolve时传入的实参）
  • 状态从pending变成rejected，进入catch中，调用函数，并传入此时的promiseValue（就是调用reject时传入的实参）

\

根据实际情况的需要，也可以不加上finally()。

小结

构造器

三种状态和值

经典格式

使用promise改造回调函数

下面我们回到具体的问题：如何对现有的，通过回调函数来实现异步操作的代码进行改写。

\

基本套路

  • 第一步：建立模板。这里的模板是指固定的套路：写一个空函数，在函数体中的创建一个promise对象，并返回。
function fnName(){
    var p = new Promise((resolve,reject)=>{})
    return p;
}

当然， 如果使用箭头函数的话，还可以简化成这样：

let fnName = () => new Promise((resolve,reject)=>{})

第二步：把异步功能写入构造器中，根据实际来决定是否调用resolve,reject。

function fnName(){
    var p = new Promise((resolve,reject)=>{
        // 这里写具体的代码，并在某个恰当的时机去调用resolve和reject函数。
    })
    return p;
}

第三步：调用函数。

通过fnName().then().catch() 结构来调用这个函数。

avatar
文章
阅读
粉丝