当前位置：首页 > news >正文

如何理解promise 续二

news 来源：原创 2025/4/29 10:16:31

尝试自定义promise搭建

Promise.resolve 封装

先来看一下，本身Promise 中的resolve 方法的写法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body><script type="text/javascript">let p =Promise.resolve()console.log(p)</script>
</html>

在这里插入图片描述
那么在自定义的promise.js 中要怎么写？

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../js/promise.js" type="text/javascript" charset="utf-8"></script></head><body></body><script type="text/javascript">let p =Promise.resolve(new Promise((resolve,reject)=>{reject('111')}))console.log(p)</script>
</html>

//添加resolve 方法
Promise.resolve =function(value){return new Promise((resolve,reject)=>{if(value instanceof Promise){value.then(v=>{resolve(v)},r=>{reject(r)})}else{resolve(value)}})
}

Promise.reject 封装


//添加resolve 方法
Promise.reject =function(value){try {return new Promise((resolve,reject)=>{reject(value)})} catch (error) {//TODO handle the exceptionreject(error)}}

Promise.all 封装

先来看一下，本身Promise 中的all 方法的写法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- <script src="../js/promise.js" type="text/javascript" charset="utf-8"></script> --></head><body></body><script type="text/javascript">let p1= new Promise((resolve,reject)=>{resolve('11')});let p2= Promise.resolve(233);let p3= Promise.resolve(23);let result = Promise.all([p1,p2,p3])console.log(result)</script>
</html>

在这里插入图片描述
自定义的方法

Promise.all =function(promises){return new Promise((resolve,reject)=>{//声明变量，来计算成功的数量let count =0;//成功结果的数组let arr=[];for (let index =0; index < promises.length; index++) {var promise = promises[index];promise.then(v=>{count++;//将当前promise对象成功的结果存储到数组中arr[index]=v;if(count === promises.length){resolve(arr)}},r=>{reject(r)})}})}

Promise.race 封装

Promise.race = function(promises){return new Promise((resolve,reject)=>{for (let i = 0; i < promises.length; i++) {promises[i].then(v=>{resolve(v)},r=>{reject(r)})}})}

封装成class

class Promise {//构造方法constructor(exectuor) {}then(onResolved, onRejected) {}catch(onRejected){}static resolve(value){}static reject(value) {}static all (promises) {}static race (promises) {}
}

async 与await

async 函数

函数都返回值为promise对象
promise对象的结果由async函数执行的返回值决定
如果返回值是一个非Promise类型的数据，则Promise的状态是fulfilled
如果返回值是一个Promise的对象，则返回状态由这个Promise的状态决定
如果throw 异常，则返回状态就是rejected

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body><script type="text/javascript">async function test(){}let result =test();console.log(result)</script>
</html>

在这里插入图片描述

await表达式

await右侧的表达式一般为promise对象，但也可以是其他的值
如果表达式是promise对象，await返回的是promise成功的值
如果表达式是其他值，直接将此值作为await的返回值

注：
await 必须写在async函数中，但async函数中可以没有await
如果await的promise失败了，就会抛出异常，需要通过try…catch捕获异常

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body><script type="text/javascript">async function test(){let p =new Promise((resolve,reject)=>{resolve('ok')})let res = await p;console.log(res)}test();</script>
</html>