实习打怪之路：Promise简介原理和常见方法

The..Fuir

于 2022-07-21 11:21:03 发布

阅读量432

点赞数 2

分类专栏：面试 ES6 文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/qq_51066068/article/details/125905809

版权

面试同时被 2 个专栏收录

152 篇文章 51 订阅

订阅专栏

ES6

28 篇文章 2 订阅

订阅专栏

目录

 这就是Promise的作用了，简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

链式操作的用法

单线程：

同步：

异步的执行机制：

异步程序的执行过程：

二、 promise用法

then 链式操作的用法

promise.all()

Promise.race

配合 async await 使用

开发技巧

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。
function runAsync(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('执行完成');
            resolve('随便什么数据');
        }, 2000);
    });
    return p;            
}
runAsync().then(function(data){
    console.log(data);
    //后面可以用传过来的数据做些其他操作
    //......
});
在runAsync()的返回上直接调用then方法，then接收一个参数，是函数，并且会拿到我们在runAsync中调用resolve时传的的参数。运行这段代码，会在2秒后输出“执行完成”，紧接着输出“随便什么数据”。

这时候你应该有所领悟了，原来then里面的函数就跟我们平时的回调函数一个意思，能够在runAsync这个异步任务执行完成之后被执行。

这就是Promise的作用了，简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

链式操作的用法

从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的：
function runAsync1(){
        var p = new Promise(function(resolve, reject){
                  //做一些异步操作
                   setTimeout(function(){
                        console.log('异步任务1执行完成');
                        resolve('随便什么数据1');
                   }, 2000);
                });
          return p;            
 }
function runAsync2(){
        var p = new Promise(function(resolve, reject){
                    //做一些异步操作
                    setTimeout(function(){
                        console.log('异步任务2执行完成');
                        resolve('随便什么数据2');
                    }, 2000);
                });
          return p;            
}
function runAsync3(){
       var p = new Promise(function(resolve, reject){
                  //做一些异步操作
                    setTimeout(function(){
                        console.log('异步任务3执行完成');
                        resolve('随便什么数据3');
                    }, 2000);
                });
         return p;            
}
runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return runAsync3();
})
.then(function(data){
    console.log(data);
});
promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

一个 promise 对象初始化时的状态是 pending，调用了 resolve 后会将 promise 的状态扭转为 fulfilled，调用 reject 后会将 promise 的状态扭转为 rejected，这两种扭转一旦发生便不能再扭转该 promise 到其他状态。

promise是用来解决两个问题的：

回调地狱，代码难以维护，常常第一个的函数的输出是第二个函数的输入这种现象

promise可以支持多个并发的请求，获取并发请求中的数据，这个promise可以解决异步的问题，本身不能说promise是异步的

单线程：

在JS引擎中负责解释和执行JavaScript代码的线程只有一个，一般称它为主线程。但是实际上还存在其他的线程，可以称之为工作线程。JS的单线程能够提高工作效率。JavaScript的主要用途是与用户互动，以及操作DOM，这就决定了它只能是单线程。单线程意味着前一个任务结束，才会执行后一个任务。

同步：

在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。如果在函数A返回的时候，调用者就能够得到预期的结果（即拿到了预期的返回值或者看到了预期的效果），那么这个函数就是同步的。
异步：不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。如果在函数A返回的时候，调用者还不能马上得到预期的结果，而是需要在将来通过一定的手段得到，那么这个函数就是异步的。

异步的执行机制：

1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）
2）主线程之外，还存在一个"任务队列"（task queue），只要异步任务有了运行结果，就在"任务队列"之中放置一个事件
3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件，那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行
4）主线程不断重复上面的第三步

异步程序的执行过程：

从一行代码开始执行程序

同步程序正常执行

如果发现是异步程序，暂时不执行，存储在异步池中，等待执行

将程序中所有同步程序执行完毕后，开启异步池，执行异步程序

①.当设定的时间到达，会执行对应的异步程序
②.先到设定时间的异步程序，先执行
③.如果设定的时间相同，按异步程序顺序，来执行

二、 promise用法

Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。

Promise的构造函数接收一个参数：函数，并且这个函数需要传入两个参数：

resolve ：异步操作执行成功后的回调函数
reject：异步操作执行失败后的回调函数

then 链式操作的用法

所以，从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多

reject的用法 :

把Promise的状态置为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。看下面的代码。
let p = new Promise((resolve, reject) => {
//做一些异步操作
setTimeout(function(){
var num = Math.ceil(Math.random()*10); //生成1-10的随机数
if(num<=5){
resolve(num);
}
else{
reject('数字太大了');
}
}, 2000);
});
p.then((data) => {
console.log('resolved',data);
},(err) => {
console.log('rejected',err);
}
);
catch方法，它是做什么用的呢？其实它和then的第二个参数一样，用来指定reject的回调。用法是这样：效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。请看下面的代码：
p.then((data) => {
 
console.log('resolved',data);
 
console.log(somedata); //此处的somedata未定义
 
})
 
.catch((err) => {
 
console.log('rejected',err);
 
});复制代码
也就是说进到catch方法里面去了，而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了，这与我们的try/catch语句有相同的功能

promise.all()

Promise.all()方法接受一个数组作为参数,p1、p2、p3都是 Promise 实例

只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数

只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数
Promise.all 接收一个 promise 对象数组作为参数，只有全部的 promise 都已经变为 fulfilled 状态后才会继续后面的处理。Promise.all 本身返回的也是一个 promise 。
const promise1 = new Promise((resolve, reject) => {  
  setTimeout(() => {  
    resolve('promise1')  
  }, 100)  
})  
const promise2 = new Promise((resolve, reject) => {  
  setTimeout(() => {  
    resolve('promise2')  
  }, 100)  
})  
const promises = [promise1, promise2]  
Promise.all(promises).then(  
  res => {  
    // promises 全部变为 fulfilled 状态的处理  
  },  
  err => {  
    // promises 中有一个变为 rejected 状态的处理  
  }  
)
Promise.race

Promise.race 和 Promise.all 类似，只不过这个函数会在 promises 中第一个 promise 的状态扭转后就开始后面的处理（fulfilled、rejected 均可）。
const promise1 = new Promise((resolve, reject) => {  
  setTimeout(() => {  
    resolve('promise1')  
  }, 100)  
})  
const promise2 = new Promise((resolve, reject) => {  
  setTimeout(() => {  
    resolve('promise2')  
  }, 1000)  
})  
const promises = [promise1, promise2]  
Promise.race(promises).then(  
  res => {  
    // 此时只有 promise1 resolve 了，promise2 仍处于 pending 状态  
  },  
  err => {}  
)
配合 async await 使用

现在的开发场景中我们大多会用 async await 语法糖来等待一个 promise 的执行结果，使代码的可读性更高。async 本身是一个语法糖，将函数的返回值包在一个 promise 中返回。
// async 函数会返回一个 promise  
const p = async function f() {  
  return 'hello world'  
}  
p.then(res => console.log(res)) // hello world
开发技巧

在前端开发上 promise 大多被用来请求接口，Axios 库也是开发中使用最频繁的库，但是频繁的 try catch 扑捉错误会让代码嵌套很严重。考虑如下代码的优化方式。
const getUserInfo = async function() {  
  return new Promise((resolve, reject) => {  
    // resolve() || reject()  
  })  
}  
// 为了处理可能的抛错,不得不将 try catch 套在代码外边，一旦嵌套变多，代码可读性就会急剧下降  
try {  
  const user = await getUserInfo()  
} catch (e) {}
好的处理方法是在异步函数中就将错误 catch，然后正常返回，如下所示 👇
const getUserInfo = async function() {  
  return new Promise((resolve, reject) => {  
    // resolve() || reject()  
  }).then(  
    res => {  
      return [res, null] // 处理成功的返回结果  
    },  
    err => {  
      return [null, err] // 处理失败的返回结果  
    }  
  )  
}  
const [user, err] = await getUserInfo()  
if (err) {  
  // err 处理  
}  
// 这样的处理是不是清晰了很多呢 
参考文章：JavaScript中Promise使用、原理以及实现过程-51CTO.COM