promise 随记

handsome man

已于 2022-10-27 10:37:48 修改

阅读量87

点赞数

文章标签：前端

于 2022-08-09 17:57:02 首次发布

本文链接：https://blog.csdn.net/qq_45628433/article/details/126242139

版权

所谓promise，是把类似的异步处理对象和处理规则进行规范化，简单来说就是一个容器，里面保存着一个异步操作的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。

他一共有三种状态，成功 —— resolve，失败 —— rejected，创建之后的状态 —— pending（除成功、失败），它的这些状态不受外界影响，只有异步操作的结果才可以决定当前是哪一种状态。他不适用于状态可能固定不变的处理

function asyncFunction() {
    (1)
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve('Async Hello world');
        }, 16);
    });
}
(2)
asyncFunction().then(function (value) {
    console.log(value);    // => 'Async Hello world'，且执行一次
}).catch(function (error) {
    console.log(error);
});

总结

用 new Promise 方法创建promise对象
用.then 或 .catch 添加promise对象的处理函数
- .catch —— promise.then(undefined, onRejected) 的别名; 也就是说，这个方法用来注册当promise对象状态变为Rejected时的回调函数。
- .then —— Promise.then 不仅仅是注册一个回调函数那么简单，它还会将回调函数的返回值进行变换，创建并返回一个promise对象。
  注：promise.then 中产生的异常不会被外界捕获，因此也得不到 then 的返回值，若return了返回值且需要进行处理时，则需要进行链式化调用

使用 promise.resolve

静态方法 Promise.resolve(value) 可以认为是 new Promise() 方法的快捷方式。会让这个promise对象立即进入确定（即resolved）状态，并将 value 传递给后面then里所指定的 onFulfilled 函数。他的返回值也是个promise 对象，所以就能直接使用 then 或者 catch 等这些在 ES6 Promises里定义的方法了。它另一个作用是将 thenable 对象转换为promise对象。

简单总结的话，可以认为，它的作用就是将传递个他的参数填充到promise对象后并返回这个promise对象

使用 promise.reject

静态方法 Promise.reject(error) 也是可以是 new Promise() 方法的快捷方式。

它和 Promise.resolve(value) 的不同之处在于promise内调用的函数是reject而不是resolve，这在编写测试代码或者进行debug时，说不定会用得上。

例如 Promise.reject(new Error("出错了"))

`处理多个 promise 对象`

Promise.all 接收 promise对象组成的数组作为参数，当这个数组里的所有promise对象全部变为resolve或reject状态的时候（它们会同时进行），它才会去调用 .then 方法（执行结果与promise 数组顺序是一致的）。
原理：当所有的异步处理都结束后，进而进行的一系列的操作
Promise.race 它的使用方法和Promise.all一样，接收一个promise对象数组为参数
原理：只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话，就会继续进行后面的处理。然而并不会取消其他 promise对象的执行

错误处理

function throwError(value) {
    // 抛出异常
    throw new Error(value);
}
// <1> onRejected不会被调用
function badMain(onRejected) {
    return Promise.resolve(42).then(throwError, onRejected);
}
// <2> 有异常发生时onRejected会被调用
function goodMain(onRejected) {
    return Promise.resolve(42).then(throwError).catch(onRejected);
}
// 运行示例
badMain(function(){
    console.log("BAD");
});
goodMain(function(){
    console.log("GOOD");
});

使用promise.then(onFulfilled, onRejected) 的话
- 在 onFulfilled 中发生异常的话，在 onRejected 中是捕获不到这个异常的。
在 promise.then(onFulfilled).catch(onRejected) 的情况下
- then 中产生的异常能在 .catch 中捕获
.then 和 .catch 在本质上是没有区别的
- 需要分场合使用。