Promise

最新推荐文章于 2024-04-27 07:44:20 发布

原创最新推荐文章于 2024-04-27 07:44:20 发布 · 289 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#promise #js

原生js 专栏收录该内容

79 篇文章

订阅专栏

本文深入讲解Promise对象在JavaScript异步编程中的应用，包括其基本概念、工作原理、常见用法及链式调用技巧，帮助读者掌握更优雅的异步编程方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Promise

描述：Promise对象是Js的异步操作解决方案，为异步操作提供统一接口。
作用：它起到代理作用，充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口。
目的：可以让异步操作写起来就像在写同步操作的流程，而不必一层层地嵌套回调函数。目的是更加优雅地书写复杂的异步任务，比如我们有多层异步，异步之后又是异步。

参考文章：

深入理解js同步和异步>>
Promise的语法糖：异步函数 async function 中可以使用 await 指令，await 指令后必须跟着一个 Promise，异步函数会在这个 Promise 运行中暂停，直到其运行结束再继续运行。异步函数实际上原理与 Promise 原生 API 的机制是一模一样的，只不过更便于程序员阅读。
理解 JavaScript 的 async/await

介绍：
Promise是一个对象，也是一个构造函数，Promise只有一个参数，就是一个函数，这个函数在构造之后会直接被异步运行，所以我们称之为”起始函数“，包含两个参数resolve(代表一切正常)和project(出现异常时所调用)。
当Promise被构造时，函数就会被异步执行：

function f1(resolve, reject) 
{
  // 异步代码
}
var p1 = new Promise(f1);

上面的代码，Promise构造函数接受一个回调函数f1作为参数，f1里面是异步操作的代码，然后返回p1就是一个Promise实例。
Promise实例有一个then方法，用来指定下一步的回调函数。

var p1 = new Promise(f1);
p1.then(f2);

上面代码，f1的异步操作执行完成，就会执行f2。

总结：传统的写法可能需要把f2作为回调函数传入f1，比如写成f1(f2)，异步操作完成后，在f1内部调用f2，Promise使得f1和f2变成了链式写法，不仅改善了可读性，回调更加方便。

Promise对象的状态

1.对象的状态不受外界影响，Promise对象代表一个异步操作，有三种状态：
(1) pending 初始状态，不是成功或失败状态。
(2) fulfilled 意味着操作成功完成。
(3) rejected 意味着操作失败。

这三种状态的变化途径只有两种：
1.从“未完成”到“成功”
2.从“未完成”到“失败”

一旦状态发生变化，就凝固了，不会再有新的状态变化，Promise实例的状态变化只可能发生一次。因此，Promise的最终结果只有两种：
1.操作成功,Promise实例传回一个值value，状态变为fulfilled.
2.操作失败，Promise实例抛出一个错误error，状态变为rejected

Promise类有三个方法

有三个方法，三个方法的参数都是一个函数

.then()可以将参数中的函数添加到当前 Promise 的正常执行序列
.catch()设定 Promise 的异常处理序列
.finally()是在 Promise 执行的最后一定会执行的序列，.then() 传入的函数会按顺序依次执行，有任何异常都会直接跳到 catch 序列

实例：

 new Promise(function(a){
        console.log("111");
        a("222")
      }).then(x=>{
        console.log(x);
        return "333";
      }).then(x=>{
        console.log(x);
        throw "error"
      }).catch(e=>{
        console.log(e)
      }).finally(()=>{
        console.log("我是finally")
      });

输出结果：
在这里插入图片描述
resolve() 中可以放置一个参数用于向下一个 then 传递一个值，then 中的函数也可以返回一个值传递给 then。但是，如果 then 中返回的是一个 Promise 对象，那么下一个 then 将相当于对这个返回的 Promise 进行操作，这一点从刚才的计时器的例子中可以看出来。

reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常。

注意：

resolve 和 reject 的作用域只有起始函数，不包括 then 以及其他序列；
resolve 和 reject 并不能够使起始函数停止运行，别忘了 return。

Promise构造函数

js提供原生的Promise构造函数，用来生成Promise实例。

var promise = new Promise(function (resolve, reject) {
  // ...

  if (/* 异步操作成功 */){
    resolve(value);
  } else { /* 异步操作失败 */
    reject(new Error());
  }
});

上面代码中，Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject，他们是两个函数，由JS引擎提供，不能自己实现。

resolve函数的作用是，将Promise实例的状态从未完成变为成功，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去，
reject函数的作用是，将Promise实例的状态从未完成变为失败，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

then()

Promise实例的then()方法，用来添加回调函数。
then方法可以接受两个回调函数，第一个是异步操作成功时的回调函数，第二个是异步操作失败时的回调函数，一旦状态改变，就调用相应的回调函数。

一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

Promise是一个构造函数。
如下例子：

new Promise(function(a, b) {
        if (3 > 2) {
          a("成功了");
        } else {
          b("失败了");
        }
      })
        .then(function(data) {
          console.log("哈哈", data);
          return 1;
        })
        .then(function(data) {
          console.log(data);
        })
        .catch(function(data) {
          console.log("哈哈", data);
        });
    }

上述例子中，Promise中的参数，第一个表示resolve，第二个表示reject，当执行resolve时，promise会调用then中的方法，当执行reject时，会调用catch中的方法，上述例子中，第一个参数a就表示resolve，第二个参数b就表示reject。
因为3>2，此时会执行a，a的参数值是（“成功了”）,此时，会把该参数值传到then中方法中的data参数，控制太会输出"哈哈,成功了”，第一then执行完了，会继续执行下一个then，上一个then返回值是1，则第二个then方法中的data值是1，控制台输出1，没有第三个then了，此时执行结束，如果还有需要执行的操作，可以继续执行下一个then。
注：也可以不给第二个then传参数，如下：

new Promise()
  .then(function(data) {
    console.log("Hello!");
  })
  .then(function() {
    console.log("123");
  })
  .catch();

如果执行reject时，会直接调用catch中的方法，不会考虑有多少个then。

总结：
Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确，按照标准来讲，resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。不过在我们开始阶段可以先这么理解，后面再细究概念。

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

runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return runAsync3();
})
.then(function(data){
    console.log(data);
});

这样能够按顺序，每隔两秒输出每个异步回调中的内容，在runAsync2中传给resolve的数据，能在接下来的then方法中拿到。运行结果如下：
在这里插入图片描述
猜猜runAsync1、runAsync2、runAsync3这三个函数都是如何定义的？没错，就是下面这样

function runAsync1(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务1执行完成');
            resolve('随便什么数据1');
        }, 1000);
    });
    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;            
}

在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了，比如我们把上面的代码修改成这样：

runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return '直接返回数据';  //这里直接返回数据
})
.then(function(data){
    console.log(data);
});

那么输出就变成了这样：
在这里插入图片描述
reject的用法
到这里，你应该对“Promise是什么玩意”有了最基本的了解。那么我们接着来看看ES6的Promise还有哪些功能。我们光用了resolve，还没用reject呢，它是做什么的呢？事实上，我们前面的例子都是只有“执行成功”的回调，还没有“失败”的情况，reject的作用就是把Promise的状态置为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。看下面的代码。

function getNumber(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            var num = Math.ceil(Math.random()*10); //生成1-10的随机数
            if(num<=5){
                resolve(num);
            }
            else{
                reject('数字太大了');
            }
        }, 2000);
    });
    return p;            
}

getNumber()
.then(
    function(data){
        console.log('resolved');
        console.log(data);
    }, 
    function(reason, data){
        console.log('rejected');
        console.log(reason);
    }
);

getNumber函数用来异步获取一个数字，2秒后执行完成，如果数字小于等于5，我们认为是“成功”了，调用resolve修改Promise的状态。否则我们认为是“失败”了，调用reject并传递一个参数，作为失败的原因。

运行getNumber并且在then中传了两个参数，then方法可以接受两个参数，第一个对应resolve的回调，第二个对应reject的回调。所以我们能够分别拿到他们传过来的数据。多次运行这段代码，你会随机得到下面两种结果：
在这里插入图片描述

catch的用法
我们知道Promise对象除了then方法，还有一个catch方法，它是做什么用的呢？其实它和then的第二个参数一样，用来指定reject的回调，用法是这样：

getNumber()
.then(function(data){
    console.log('resolved');
    console.log(data);
})
.catch(function(reason){
    console.log('rejected');
    console.log(reason);
});

效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。请看下面的代码：

getNumber()
.then(function(data){
    console.log('resolved');
    console.log(data);
    console.log(somedata); //此处的somedata未定义
})
.catch(function(reason){
    console.log('rejected');
    console.log(reason);
});

在resolve的回调中，我们console.log(somedata);而somedata这个变量是没有被定义的。如果我们不用Promise，代码运行到这里就直接在控制台报错了，不往下运行了。但是在这里，会得到这样的结果：
在这里插入图片描述
也就是说进到catch方法里面去了，而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了，这与我们的try/catch语句有相同的功能。

all的用法
Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。我们仍旧使用上面定义好的runAsync1、runAsync2、runAsync3这三个函数，看下面的例子：

Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});

用Promise.all来执行，all接收一个数组参数，里面的值最终都算返回Promise对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到then里面。那么，三个异步操作返回的数据哪里去了呢？都在then里面呢，all会把所有异步操作的结果放进一个数组中传给then，就是上面的results。所以上面代码的输出结果就是：
在这里插入图片描述
有了all，你就可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据，是不是很酷？有一个场景是很适合用这个的，一些游戏类的素材比较多的应用，打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后，我们再进行页面的初始化。
race的用法
all方法的效果实际上是「谁跑的慢，以谁为准执行回调」，那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，这就是race方法，这个词本来就是赛跑的意思。race的用法与all一样，我们把上面runAsync1的延时改为1秒来看一下：

Promise
.race([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});

这三个异步操作同样是并行执行的。结果你应该可以猜到，1秒后runAsync1已经执行完了，此时then里面的就执行了。结果是这样的：
在这里插入图片描述
你猜对了吗？不完全，是吧。在then里面的回调开始执行时，runAsync2()和runAsync3()并没有停止，仍旧再执行。于是再过1秒后，输出了他们结束的标志。

这个race有什么用呢？使用场景还是很多的，比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作，代码如下：

//请求某个图片资源
function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
            resolve(img);
        }
        img.src = 'xxxxxx';
    });
    return p;
}
//延时函数，用于给请求计时
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('图片请求超时');
        }, 5000);
    });
    return p;
}
Promise
.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

requestImg函数会异步请求一张图片，我把地址写为"xxxxxx"，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。运行结果如下：
在这里插入图片描述

Promise优缺点

有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。

Promise 也有一些缺点。首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

Promise创建

要想创建一个 promise 对象、可以使用 new 来调用 Promise 的构造器来进行实例化。

下面是创建 promise 的步骤：

var promise = new Promise(function(resolve, reject) {

// 异步处理

// 处理结束后、调用resolve 或 reject

});
Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。

var myFirstPromise = new Promise(function(resolve, reject){
//当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
//在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法.
setTimeout(function(){
resolve("成功!"); //代码正常执行！
}, 250);
});
myFirstPromise.then(function(successMessage){
//successMessage的值是上面调用resolve(...)方法传入的值.
//successMessage参数不一定非要是字符串类型，这里只是举个例子
document.write("Yay! " + successMessage);
});

对于已经实例化过的 promise 对象可以调用 promise.then() 方法，传递 resolve 和 reject 方法作为回调。
promise.then() 是 promise 最为常用的方法。
promise.then(onFulfilled, onRejected)
promise简化了对error的处理，上面的代码我们也可以这样写：
promise.then(onFulfilled).catch(onRejected)

如下例子：

<template>
  <div class="main"></div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
  //这个test()函数有两个参数，这两个参数都是函数，如果执行成功，我们将调用resolve('200 OK')，如果执行失败，我们将调用reject('timeout in ' + timeOut + ' seconds.')。可以看出，test()函数只关心自身的逻辑，并不关心具体的resolve和reject将如何处理结果。
    myfun() {
      function test(a, b) {
        var timeout = Math.random() * 2;
        console.log(timeout);
        setTimeout(function() {
          if (timeout < 1) {
            console.log("呼叫a");
            a("200 OK");
          } else {
            console.log("呼叫b");
            b(`时间是${timeout}`);
          }
        }, timeout * 1000);
      }
//变量p1是一个Promise对象，它负责执行test函数，由于test函数在内部是异步执行的，当test函数执行成功时，我们告诉promise对象
      var p1 = new Promise(test);
      //如果成功则执行then中的内容
      var p2 = p1.then(function(r) {
        console.log("成功", r);
      });
      //如果失败则执行catch中的内容
      var p3 = p2.catch(function(r) {
        console.log("失败", r);
      });
    }
  },
  mounted() {
    this.myfun();
  }
};
</script>

结果如下：
在这里插入图片描述
上述promise部分可以串联起来：

new Promise(test).then(function(r){
    console.log("成功",r)
}).catch(function(err){
    console.log("失败",err)
})

上述代码可以简化为：

new Promise(function (resolve, reject) {
    log('start new Promise...');
    var timeOut = Math.random() * 2;
    log('set timeout to: ' + timeOut + ' seconds.');
    setTimeout(function () {
        if (timeOut < 1) {
            log('call resolve()...');
            resolve('200 OK');
        }
        else {
            log('call reject()...');
            reject('timeout in ' + timeOut + ' seconds.');
        }
    }, timeOut * 1000);
}).then(function (r) {
    log('Done: ' + r);
}).catch(function (reason) {
    log('Failed: ' + reason);
});

可见Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了：
在这里插入图片描述
Promise还可以做更多的事情，比如，有若干个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执行错误处理函数。

要串行执行这样的异步任务，不用Promise需要写一层一层的嵌套代码。有了Promise，我们只需要简单地写：

job1.then(job2).then(job3).catch(handleError);

其中，job1、job2和job3都是Promise对象。

下面的例子演示了如何串行执行一系列需要异步计算获得结果的任务：

// 0.5秒后返回input*input的计算结果:
function multiply(input) {
    return new Promise(function (resolve, reject) {
        log('calculating ' + input + ' x ' + input + '...');
        setTimeout(resolve, 500, input * input);
    });
}

// 0.5秒后返回input+input的计算结果:
function add(input) {
    return new Promise(function (resolve, reject) {
        log('calculating ' + input + ' + ' + input + '...');
        setTimeout(resolve, 500, input + input);
    });
}

var p = new Promise(function (resolve, reject) {
    log('start new Promise...');
    resolve(123);
});

p.then(multiply)
 .then(add)
 .then(multiply)
 .then(add)
 .then(function (result) {
    log('Got value: ' + result);
});

setTimeout可以看成一个模拟网络等异步执行的函数。现在，我们把上一节的AJAX异步执行函数转换为Promise对象，看看用Promise如何简化异步处理：

var log = document.getElementById('test-promise-ajax-result');
var p = ajax('GET', '/api/categories');
p.then(function (text) { // 如果AJAX成功，获得响应内容
    log.innerText = text;
}).catch(function (status) { // 如果AJAX失败，获得响应代码
    log.innerText = 'ERROR: ' + status;
});

Promise.all()

除了串行执行若干异步任务外，Promise还可以并行执行异步任务。
试想一个页面聊天系统，我们需要从两个不同的URL分别获得用户的个人信息和好友列表，这两个任务是可以并行执行的，用Promise.all()实现如下：

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
// 同时执行p1和p2，并在它们都完成后执行then:
Promise.all([p1, p2]).then(function (results) {
    console.log(results); // 获得一个Array: ['P1', 'P2']
});

Promise.race()

有些时候，多个异步任务是为了容错。比如，同时向两个URL读取用户的个人信息，只需要获得先返回的结果即可。这种情况下，用Promise.race()实现：

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
    console.log(result); // 'P1'
});

由于p1执行较快，Promise的then()将获得结果’P1’。p2仍在继续执行，但执行结果将被丢弃。
如果我们组合使用Promise，就可以把很多异步任务以并行和串行的方式组合起来执行。

实例分析：

<template>
  <div class="home">
    请输入数字：
    <input type="text" v-model="msg">
    <button @click="myf1">测试</button>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      msg:""
    };
  },
  methods: {
    myf1(){
      let that=this;
      new Promise(function(a,b){
        if(that.msg>10)
        {
          a("成功了")
        }
        else
        {
          b("失败了")
        }
      }).then(function(data){
        console.log(data);
        return 123;
      }).then(function(data){
        console.log(data);
      }).catch(function(data){
        console.log(data)
      });
    }
  },
};
</script>

上述例子中，我在文本框输入9，打印结果会显示”失败了“
我输入12，打印结果显示：
在这里插入图片描述
总上面的例子得出结论：
Promise接受一个函数作为它的参数，但是函数默认有两个参数：第一个参数表示成功时第一个then接受的参数值，第二个参数表示失败时，catch接受的参数值。

上面的例子中，如果输入9，则会执行else，else里面执行的b给的参数是"失败了"，此时"失败了"就会传给catch中的function的参数data的值。
如果输入12,则会执行promise参数的函数if语句，执行a参数是"成功了"，这参数会传递给第一个then，那么第一个then中的function的参数data的值就是"成功了"，如果我们要then，那么我们需要在第一个then里面进行return，return一个数值做为下一个return的参数值，此时我们return 123,那么下一个then里面的function的参数data的值就是123。