Promise深入了解

已于 2022-10-10 20:21:48 修改
阅读量554 收藏
点赞数
分类专栏： 笔记 文章标签： javascript 前端 typescript
于 2022-10-10 20:15:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41487095/article/details/127251422
版权

Promise深入了解

一、promise基本使用

promise是js中进行异步编程的解决方案。

Promise 实例（用Promise封装异步操作）：

resolve：解决 函数类型的数据

reject ：拒绝 函数类型的数据

调用then方法：第一个参数 状态为成功的回调函数；第二个参数 状态为失败的回调函数

1. 读取文件（node环境）

const fs = require('fs');

//Promise 形式
let p = new Promise((resolve, reject) => {
    fs.readFile('./resource/content.txt', (err, data) => {
        if (err) reject(err);
        resolve(data);
    });
});
p.then(
    (value) => {
        console.log(value.toString());
    },
    (reason) => {
        console.log(reason);
    }
);

2. 发送请求

const p = new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://127.0.0.1:8000/server');
    xhr.send();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300)
                resolve(xhr.response);
            else {
                reject(xhr.status);
            }
        }
    };
});
p.then(
    (value) => {
        console.log(value);
    },
    (reason) => {
        console.warn(reason);
    }
);

二、Promise封装

1. 读取文件（node环境）

function mineReadFile(path) {
    return new Promise((resolve, reject) => {
        require('fs').readFile(path, (err, data) => {
            if (err) reject(err);
            resolve(data);
        });
    });
}
mineReadFile('./resource/content.txt').then(
    (value) => {
        console.log(value.toString());
    },
    (reason) => {
        console.log(reason);
    }
);

2. 发送请求

以下代码与平时开发用到的请求形式非常相似。

function sendAJAX(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300)
                    resolve(xhr.response);
                else {
                    reject(xhr.status);
                }
            }
        };
    });
}
sendAJAX('http://127.0.0.1:8000/server').then(
    (value) => {
        console.log(value);
    },
    (reason) => {
        console.warn(reason);
    }
);

三、Promise的API

1. catch

let p = new Promise((resolve, reject) => {
    reject('error');
});

// catch方法用来指定失败的回调函数
p.catch((reason) => {
    console.log(reason);
});

2. resolve

// 传入参数为 非Promise类型的对象，则返回的结果为成功的promise对象
let p1 = Promise.resolve('521');
// 传入参数为 Promise 对象，则参数的结果决定了 resolve 的结果
let p2 = Promise.resolve(
    new Promise((resolve, reject) => {
        // resolve('ok');   //内部成功则外部也成功 且结果一样
        reject('err'); //内部失败则外部也失败
    })
);

3. reject

// 返回结果永远都是失败 传什么结果为什么
let p = Promise.reject('521');
let p1 = Promise.reject( // 结果为promise对象
    new Promise((resolve, reject) => {
        resolve('ok');
    })
);

4. all

let p1 = new Promise((resolve, reject) => {
    resolve('ok');
});
let p2 = new Promise((resolve, reject) => {
    resolve('Success');
});
let p3 = new Promise((resolve, reject) => {
    resolve('OHHHHH');
});
let p4 = new Promise((resolve, reject) => {
    reject('err');
});
const result = Promise.all([p1, p2, p3]); //全部成功则成功 返回值为所有成功结果的集合
const result1 = Promise.all([p1, p2, p4]); //有一个失败就失败 返回值为失败的结果
console.log(result);
console.log(result1);

请添加图片描述

5. race

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('ok');
    }, 1000);
});
let p2 = new Promise((resolve, reject) => {
    resolve('Success');
});
let p3 = new Promise((resolve, reject) => {
    resolve('OHHHHH');
});
// 谁先改变状态,则他的结果为返回值
const result = Promise.race([p1, p2, p3]);
console.log(result);

请添加图片描述

Promise对象有三种状态：

初始化状态：pending

resolve('ok'); pending -> fulfilled

reject('err'); pending-> rejected

四、promise创建实例简单实现

Promise构造函数参数为： executor函数 —— 执行器 ((resolve,reject)=>{})

executor 会在 Promise 内部立即同步调用，异步操作在执行器中执行。

以最初的例子为例观察：

const p = new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://127.0.0.1:8000/server');
    xhr.send();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300)
                resolve(xhr.response);
            else {
                reject(xhr.status);
            }
        }
    };
});
p.then(
    (value) => {
        console.log(value);
    },
    (reason) => {
        console.warn(reason);
    }
);

1. 首先创建类

class Promise {
    constructor(executor) {
        function resolve(data) {
        }

        function reject(error) {
        }
        
        try {
            executor(resolve, reject);
        } catch (error) {
            //修改promise 状态为失败
            reject(error);
        }
    }
}

2. 在then中获取resolve、reject具体执行

这里类需要添加三个属性：对象状态、对象结果值、对象回调数组。

且promise对象的then可以链式调用，所以then返回promise对象。

class Promise {
    constructor(executor) {
        // 添加属性
        this.PromiseState = 'pending';
        this.PromiseResult = null;
        this.callbacks = [];

        const self = this;
        function resolve(data) {
            if (self.PromiseState !== 'pending') return;
            // 1. 修改对象的状态 (promiseState)
            self.PromiseState = 'fulfilled';
            // 2. 修改对象结果值 (promiseResult)
            self.PromiseResult = data;
            // 调用成功的回调函数,异步
            setTimeout(() => {
                self.callbacks.forEach((item) => {
                    item.onResolved(data);
                });
            });
        }

        function reject(data) {
            if (self.PromiseState !== 'pending') return;
            // 1. 修改对象的状态 (promiseState)
            self.PromiseState = 'rejected';
            // 2. 修改对象结果值 (promiseResult)
            self.PromiseResult = data;
            // 执行回调
            setTimeout(() => {
                self.callbacks.forEach((item) => {
                    item.onRejected(data);
                });
            });
        }

        try {
            executor(resolve, reject);
        } catch (error) {
            //修改promise 状态为失败
            reject(error);
        }
    }

    then(onResolved, onRejected) {
        const self = this;
        // 判断回调函数参数
        if (typeof onRejected !== 'function') {
            onRejected = (reason) => {
                throw reason;
            };
        }
        if (typeof onResolved !== 'function') {
            onResolved = (value) => value;
        }
        return new Promise((resolve, reject) => {
            // 封装函数
            function callback(type) {
                try {
                    // 获取回调函数的执行结果
                    let result = type(self.PromiseResult);
                    if (result instanceof Promise) {
                        result.then( // 支持链式调用，且结果传递
                            (v) => {
                                resolve(v);
                            },
                            (r) => {
                                reject(r);
                            }
                        );
                    } else {
                        resolve(result);
                    }
                } catch (error) {
                    reject(error);
                }
            }
            if (this.PromiseState === 'fulfilled') {
                setTimeout(() => {
                    //异步
                    callback(onResolved);
                });
            }
            if (this.PromiseState === 'rejected') {
                setTimeout(() => {
                    callback(onRejected);
                });
            }
            if (this.PromiseState === 'pending') {
                // pending状态保存回调函数
                this.callbacks.push({
                    onResolved: function() {
                        callback(onResolved);
                    },
                    onRejected: function() {
                        callback(onRejected);
                    },
                });
            }
        });
    }
}

分析：

若executor内的reject, resolve先于then执行，则改变对象状态，执行空回调函数数组。在p.then执行回调函数。

若executor内的reject, resolve后于then执行，则then收集回调函数，在executor内的reject, resolve执行回调函数。

五、async和await

1. async

函数返回值为Promise对象 结果由async函数执行的返回值决定

async function main() {
    // 1. 返回值为非Promise类型数据 返回结果为fulfilled 结果为返回值
    
    // 2. 返回一个Promise对象 结果和Promise的结果一致
    return new Promise((resolve, reject) => {
        // reject('err');
        resolve('ok');
    });
    
    // 3. 抛出异常 结果失败rejected 结果为抛出的值
    // throw 'Oh NO';
}

2. await

  1. await右侧的表达式一般为Promise对象，但也可以是其他值
  2. 如果表达式是Promise对象，await返回的是Promise成功的值
  3. 如果表达式是其他值，直接将此值作为await的返回值
  4. 注意：
    1. await必须写在async函数中，但async函数可以没有await
    2. 如果await的promise失败了，就会抛出异常，需要通过try…catch捕获处理
async function main() {
    let p = new Promise((resolve, reject) => {
        reject('err');
    });
    
    try {
        let res = await p;
    } catch (error) {
        console.log(error);
    }
}
main();

一般用async和await同步处理异步操作。

综上，完成对Promise的梳理。

路玉屏风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
深入理解Promise.all
10-18
主要介绍了深入理解Promise.all，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Promise 请求基础操作和简单封装
weixin_48366131的博客
11-24 1499
promise是es6新出的一个类目的是解决jQuery的请求中出现的回调地狱现象
关于Promise的使用
vanora1111的博客
07-25 709
调用一个函数，这个函数中发送网络请求（我们可以用定时器来模拟）如果发送网络请求成功了，那么告知调用者发送成功，并且将相关数据返回过去。如果发送网络请求失败了，那么告知调用者发送失败，并且告知错误信息。............
Promise.all方法同步发送请求
最新发布
weixin_59559908的博客
02-19 290
下面是获取数据的时候让这几个方法同步发送请求，就是他们在相同的时间同步发请求，等到他们每一个都发送完毕才会执行下边的代码，发送的时候让骨架屏显示，请求完毕以后就让骨架屏隐藏，让页面结构出来。同步发送异步请求，优化响应速度，不需要等待第一个发完以后第二个才发送请求，节约时间。Promise.all([ 里面放异步方法 ])
JavaScript/ES6：代码执行顺序/从上到下的顺序依次执行/promise/async await
snowball的博客
05-05 889
待定状态的 Promise 对象要么会通过一个值被兑现（fulfilled），要么会通过一个原因（错误）被拒绝（rejected）。如果 promise 在一个相应的处理程序被绑定时就已经被兑现或被拒绝了，那么这个处理程序就会被调用，因此在完成异步操作和绑定处理方法之间不会存在竞争状态。这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 Promise ，以便在未来某个时候把值交给使用者。Promise将异步执行的程序变成同步执行，所谓的在开发中解决回调嵌套的问题。
Promise的使用大全(请求数据和调用方法--多种写法)
南下有你
09-15 4473
一、promise的含义和作用 Promise 异步操作之后会有三种状态 pending:等待状态，比如正在进行网络请求，或者定时器没有到时间 fullfill:满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then() reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且回调.catch() 二、什么情况会用到promise 一般情况下有一步请求时，使用promise对这个异步操作进行封装 new -> 构造函数（1.保存了一些状态信息 2.执行传
Promise使用详解及手写
qq_53109172的博客
05-20 146
俗话说的好，没有对比就没有伤害，所以我们通过一个案例来认识一下没有 Promise 怎么解决这个异步请求，如下： 上述代码实现的功能就是调用 requests 方法，参数一接收一个 id， 参数二接收一个回调函数，模拟根据 id 获取学生信息，获取到数据后调用回调函数执行需要的逻辑，目前可能看着觉得还好是吧，一个回调也能接受那如果我们的业务需要根据上一次的请求结果来决定下一次的请求结果呢，而这种嵌套又不止一层呢，我们在来看一下下面这个案例，如下： 这个案例只是演示随意编写的，在实际开发中，可能层级不
深入理解js promise chain
10-22
下面小编就为大家带来一篇深入理解js promise chain。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
深入理解ES6 Promise 扩展always方法
08-29
本篇文章主要介绍了ES6 Promise 扩展always方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
一、Promise 异步请求（网络请求）
m0_66468899的博客
09-06 256
①params： 请求体/请求参数/查询的对象(当请求方式是get)② transformRequest、transformResponse 对请求结果进行预处理、对响应结果进行预处理③headers：请求头 （在身份验证时，可以在头信息加入一个标识）④data：请求体(当请求方式是post), 数据形式有json对象和字符串形式⑤responseType：响应的数据格式json/text/document/stream等⑥ withCredentials：跨域亲戚是否携带cookies。
如果要发100 个请求，怎么用 Promise 去控制并发
xy1580的博客
07-14 157
如果要发100 个请求，怎么用 Promise 去控制并发
通过promise预处理前端请求
dazeka的博客
08-31 234
基于promise的一个简单接口预处理函数
Vue总结第七天~Promise网络请求和axios 网络模块
伟庭的博客
12-31 5513
Vue总结第七天~Promise网络请求和axios 网络模块
Promise用法简介
weixin_55803498的博客
06-09 235
一，promise基础 promise是异步编程的一种解决方案，假设当遇到ajax请求A的回调函数中嵌套另一个请求B，请求B的回调函数中又嵌套一个请求C，请求C的回调函数中又嵌套一个请求D，以此最终获取到D回调函数中的data。正常情况下这种方式可以运行且可以获取我们想得到的结果，但这样的代码在完成后在视觉上不容易看出其中的嵌套关系，而且在后期不易维护。promise就在一定程度上解决了这种问题。 使用方法（以下用定时器模拟异步操作） //其中传入的resolve,reject本身也是函数 //re
使用Promise控制请求并发数的有效方法
m0_51403152的博客
05-08 2271
并发控制的目标是通过采用合适的技术和策略，保证在多个任务同时执行时，对共享资源的访问和修改是安全和可靠的。在并发执行中，多个任务交替执行的顺序是不确定的，每个任务执行一段时间后，切换到下一个任务，通过快速的切换使得任务之间产生了一种同时进行的错觉。总结来说，这段代码通过维护一个请求队列和递归调用的方式，实现了限制并发请求数量，并在请求完成后调用回调函数进行进一步的处理。综上所述，并发和并行是不同的概念，而并发控制和切片控制则是在并发执行环境中保证任务执行的安全性和顺序性的技术手段。
promise使用详解
taowuhua的博客
06-16 2961
号外号外：本篇文章主要使用了ES6箭头函数，如果不熟悉的同学建议看一看。嘻嘻 开篇之前先理清下面几个问题 Promise的构造函数参数可以传递什么类型？除了使用Promise构造函数进行链式调用外，Promise还有什么方式进行链式调用吗？ Promise.resolve（）的参数可以传递什么类型的数据？不同类型的数据产生怎样的结果？ Promise的构造函数中调用resolve()/reject()这样做的目的是什么？ Promise的then方法是做什么的？ 如何终止链式调用？（这个场景会在
一、Promise 异步请求（网络请求）：
2301_79206800的博客
09-06 250
①params： 请求体/请求参数/查询的对象(当请求方式是get)② transformRequest、transformResponse 对请求结果进行预处理、对响应结果进行预处理③headers：请求头 （在身份验证时，可以在头信息加入一个标识）④data：请求体(当请求方式是post), 数据形式有json对象和字符串形式⑤responseType：响应的数据格式json/text/document/stream等⑥ withCredentials：跨域亲戚是否携带cookies。
promise封装ajax向服务器发送请求
sssssboer的博客
04-27 1248
JavaScript没有通讯能力，而浏览器具有通讯能力。 浏览器内建XMLHttpRequest构造函数与服务器取得联系 通过JavaScript操作XMLHttpRequest与服务器取得联系 构造函数XMLHttpRequest有自己的属性方法 浏览器与服务器进行通信，通信协议就为Http协议 XMLHttpRequest属性方法： 1：open（请求方法，URL，是否异步） 2：send（请求体） 3：readyState Http协议规定了服务器状态码反馈响应：200，304，40
promise 不好理解
04-30
但是，Promise内部的状态管理、抛出错误和异常处理等方面，需要我们花时间深入学习。 另一方面，Promise的使用也需要我们比较好的理解JavaScript的事件循环机制，才能更好理解Promise的实现过程和使用方法。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值