JavaScript中Promise使用详解：从原理到实战

前言：

前端开发者熟知，JavaScript采用单线程模型，浏览器仅分配一个主线程执行任务。任务按顺序形成队列依次执行。然而，网络请求、事件监听和定时器等耗时操作若排队执行，会严重降低程序效率，甚至导致页面假死。为此，浏览器开辟了独立线程（如HTTP请求线程、事件触发线程、定时器线程）处理这些耗时任务。由于这些任务是异步的，前端开发中处理异步回调主要依赖Async/Await和Promise机制。

在前端面试中，Promise相关的使用问题常被提及，笔试中也常出现关于Promise与setTimeout执行顺序的题目。这表明掌握Promise对于前端开发至关重要。本文将详细分享Promise的使用技巧与核心知识点。

一、首先，要知道为什么要用Promise语法？

在介绍Promise之前，先了解JavaScript的特性。前端开发中，JS传统上是单线程同步执行的，仅有一个主线程。随着技术发展，为弥补早期缺陷，引入了异步思想，即异步过程的执行不再受原有序列顺序限制，从而解决了同步执行效率低下的问题。简而言之，异步是指从主线程发射子线程来完成任务。

接下来了解Promise。Promise是ES6新增的类，旨在更好地处理复杂的异步任务。但并非所有浏览器都支持，例如旧版本浏览器不支持，只有Safari 10及以上版本和Windows Edge 14及以上版本才开始支持ES6特性。

Promise作为回调函数的替代方案，用于处理异步操作，解决了回调函数嵌套回调函数的问题，更简洁地控制函数执行流程。Promise对象表示异步操作的最终结果（成功或失败）及返回值，是一个代理值，也是ES6提供的一种异步回调解决方案。

Promise对象代理的值初始为未知，状态动态可变，因此有三种状态：进行中（pending）、成功（fulfilled）和失败（rejected）。运行过程中，状态只能从进行中变为失败，或从进行中变为成功。使用Promise对象可以通过同步的表达形式来运行异步代码。

• ①pending：初始状态，既不成功，也不失败；
• ②fulfilled：操作成功结束；
• ③rejected：操作失败。

如何构造Promise？这里简单举一个构造Promise的示例：

new Promise(function (resolve, reject) {

   // 要做的事情...

});

通过上面新构造一个Promise 对象似乎看不出它如何处理复杂的异步任务，接下来介绍Promise的核心操作。

二、接着，来了解一下回调地狱(Callback Hell)

回调地狱也称回调嵌套或函数混乱调用，通俗讲即：需要发送三个网络请求，第三个请求依赖第二个请求的结果，第二个请求依赖第一个请求的结果。这种不断增加的嵌套使用方式构成了回调地狱。

回调函数的弊端：

代码阅读困难，不利于排查错误，且无法直接return等。例如：

setTimeout(() => {
console.log(1)
setTimeout(() => {
console.log(2)
setTimeout(() => {
console.log(3)
},3000)
},2000)
},1000)

三、最后，也是本章的重头戏，Promise的基本使用

Promise构造函数仅有一个参数，即一个函数，该函数在构造后会被异步执行，称为起始函数。起始函数（即Promise构造函数内部）包含两个参数：resolve和reject，分别表示异步操作成功或失败的状态。

当Promise被构造时，起始函数会被异步执行；resolve和reject均为函数，调用resolve代表一切正常，调用reject表示出现异常。

• ①异步操作成功，调用resolve函数，将Promise对象的状态改为fulfilled。
• ②异步操作失败，调用rejected函数，将Promise对象的状态改为rejected。

举一个使用例子，比较规范的写法是把Promise封装到一个函数里然后同时返回一个Promise，如下所示：

const delay = (millisecond) => {
return new Promise((resolve, reject)=>{
if (typeof millisecond != 'number') reject(new Error(‘必须是number类型'));
setTimeout(()=> {
resolve(`延迟${millisecond}毫秒后输出`)
}, millisecond)
})
}

上述例子可见Promise有两个参数：resolve和reject。resolve：将异步执行从pending（请求）变为resolve（成功返回），是一个函数执行返回；reject：见名知意为“拒绝”，从请求变为“失败”，是函数可以执行返回的一个失败结果，推荐返回一个错误new Error()，这样做更加清晰明了，更加规范。

（一） resolve函数

若传入的是非Promise，基本数据类型的数据，则返回成功的Promise；若传入的是Promise，则该对象的结果就决定了resolve的返回结果值。

let obj =new Promise((resolve,reject)=>{
resolve(‘yes');
});

//1.若传入的是非Promise，基本数据类型的数据，则返回成功的Promise。

let p1= Promise.resolve('123')

//2.若传入的是Promise，则该对象的结果就决定了resolve的返回结果值。

let p2 = Promise.resolve(obj);

//3.嵌套使用

let p3 = Promise.resolve(Promise.resolve(Promise.resolve('abc')));
console.log(p3);

（二） rejected函数

Promise.prototype.reject，始终返回的是失败的Promise。

let p = Promise.reject(123123);
let p2 = Promise.reject('abc');
let p3 = Promise.reject(Promise.resolve('ok'));
console.log(p3);

（三）Promise的API

Promise的API里面常用的几个方法有：then、catch、finally、all、race等，具体的使用方法下面一一道来。

1. then

then指定成功或失败的回调到当前的Promise。then里面拿到的Promise resolve里面的数据，并返回一个Promise继续提供使用；then方法返回的结果由then指定回调函数决定。

实例如下所示：

let p=new Promise((resolve,reject)=>{
resolve(‘yes')
})

p.then(value=>{
console.log(value) //这里的value就是上面的yes
},reason=>{
console.error(reason)
})

2. catch

catch指定失败的回调，返回的是失败的结果。

实例如下所示：

let p =new Promise((resolve,reject)=>{
reject('失败！')；
})

p.then(value=>{},reason=>{
console.error(reason);
})

p.catch(reason=>{
console.error(reason)
})

3. finally

finally用来进行收尾工作，无论Promise的状态成功和失败与否，当执行完回调函数之后，都会去finally寻找最后的回调函数来执行。

实例如下所示：

request.finally(function(){
// 最后，而且一定会执行的代码
})

4. Promise.all

在多个Promise任务一起执行的时候，若全部成功，则返回一个新的Promise，若其中有一个失败，则返回失败的Promise对象。

实例如下所示:

let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘yes');
}, 1000);
});

let p2 = Promise.resolve('ok');
let p3 = Promise.reject('Oh no');

//所有的
let result = Promise.all([p1, p2, p3]);
console.log(result);

5. Promise.race

在多个Promise任务同步执行的时候，返回最先结束的Promise任务结果，无论最后是成功还是失败，通俗点将：先到先得。

实例如下所示：

let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘yes');
}, 1000);
});

let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok');
}, 500);
});

let result = Promise.race([p1, p2]);
console.log(result); //p2 ok

四、最后

通过本文关于在前端JS开发中对Promise使用详解，是不是已经完全掌握它的使用以及原理呢？如果读者很好的掌握了本篇内容，那么以后不管是在实际开发过程中还是求职面试中，涉及到Promise的知识点都会游刃有余，Promise的重要性这里不再赘述

到此这篇关于javascript中Promise使用详解的文章就介绍到这了,更多相关javascript中的Promise内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！