Promise基础(1)

151 阅读3分钟

描述

Promise对象通常用来表示一个异步操作状态结果值

翻译成白话文有如下重点:

  • Promise对象 ,是指一个对象,对象,对象
  • 用来处理异步操作
  • 对象的数据结构自然是形如 key - value格式的。它的两个key可以简单的理解为是stateresultstate 表示当前Promise对象的状态,而result表示当前Promise对象的值。

一个Promise对象必然处于三种状态之一:

  • pending : 初始状态,没有成功,没有失败
new Promise(() => {}); // Promise {<pending>} 
// 对象的数据结构可以简单的理解为 { state: 'pending', result: undefined }
  • fulfilled : 操作成功完成
new Promise((resolve) => {
  resolve(1);
}); // Promise {<fulfilled>: 1}
// 对象的数据结构可以简单的理解为 { state: 'fulfilled', result: 1 }
  • rejected : 操作失败
new Promise((resolve, reject) => {
  reject(1);
}); // Promise {<rejected>: 1}
// 对象的数据结构可以简单的理解为 { state: 'rejected', result: 1 }

看到了么,其多么的像一个有限状态机

Promise对象的状态可以由 pending 变为 fulfilled 或者 rejected , 无论是 fulfilled 或者 rejected , 该 Promise对象的状态就已经确定并且不能更改了。

new Promise((resolve, reject) => {
  resolve(1);
  reject(1);
}); // Promise {<fulfilled>: 1}

Promise()

我们在书写代码时,一般类的命名我们会采用大写字母开头的驼峰命名法。而Promise本身就是一个类。 来,让我们阅读以下代码:

const p = new Promise((resolve) => {
  resolve(1);
});

这段代码,我们可以理解为:我们用 new运算符 实例化Promise类的一个 实例对象 p , 而 p 则是一个 Promise对象

Promise构造器的参数是一个函数,这个函数拥有两个参数:resolve 函数reject 函数。传入 Promise构造器的入参函数会立即执行。

当我们在入参函数中调用 resolve 函数时,会将实例Promise对象的状态值改为 fulfilled,并将传入给 resolve函数的参数作为Promise对象的结果值:

const p = new Promise((resolve) => {
  resolve(1);
});
console.log(p);// Promise {<resolved>: 1}

当我们在入参函数中调用 reject 函数时,会将实例Promise对象的状态值改为 rejected,并将传入给 reject函数的参数作为Promise对象的结果值:

const p = new Promise((resolve, reject) => {
  reject(1);
});
console.log(p);// Promise {<rejected>: 1}

至于传递给Promise构造器的函数的返回值,我个人理解为意义不是很大,规范中是这样讲到的:

Returning from the executor function does not mean that the deferred action has been completed but only that the request to eventually perform the deferred action has been accepted.

我其实不是很理解这段话想要表达什么意思。当我们在实践中,如果 return 操作在 调用 resolve 或者 reject 函数之前,那么 resolvereject 函数并不会执行,那么通过构造器得到的实例Promise对象其实是处在pending状态的:

const p = new Promise((resolve, reject) => {
  return 'completed';
  resolve(1);
});
console.log(p); // Promise {<pending>}

而如果我们在调用 resolve 或者 reject 函数之后执行 return 操作,那么对我们的得到Promise对象其实并不会产生什么影响:

const p = new Promise((resolve, reject) => {
  resolve(1);
  return 'completed';
});
console.log(p); // Promise {<resolved>: 1}

或许可以这么用?:

const fun = (resolve, reject) => {
  resolve(1);
  return 'completed';
};

const p = new Promise(fun);
console.log(p);

const funRes = fun(console.log);
console.log(funRes);

// Promise {<resolved>: 1}
// 1
// completed

在实践中,我确实没遇到过需要在Promise构造器的入参函数中添加返回值的场景,如果有知道的同学,不妨留言分享。

结语

很久没写东西了,坚持确实是一件很困难的事情。本来计划在51之前就把Promise的内容写完的,但是懒癌发作,直到今天才写,而且我又机智的给它拆成了很多期,为未来挖坑其实不是一个好习惯。今年的年度宏观目标虽然已经完成,但是立下的技术目标却迟迟没有进展。在工作中虽然也在进步,但是确实没有将学习到的很多东西沉淀下来,未来还要争取再努力才行。