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

前端工程化18-邂逅Promise(待更新)

news 来源：原创 2025/7/12 22:59:39

6、邂逅Promise

6.1、函数对象与实例对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>准备_函数对象与实例对象</title>
</head>
<body><script>/* 函数对象、实例对象1.函数对象: 将函数作为对象使用时, 简称为函数对象。2.实例对象: new 构造函数或类产生的对象, 我们称之为实例对象。*///函数对象function Person (name,age){this.name = namethis.age = age}Person.a = 1 //将Person看成一个对象//一个小的面试点Person.name="英叔"	console.log(Person.name); //输出结果为Person 而不是林正英const p1 = new Person('老刘',18) //p1是Person的实例对象console.log(p1);</script>
</body>
</html>

6.2、回调函数的分类

要区分那些函数进浏览器回调队列那些不进

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>准备_回调函数的分类</title>
</head>
<body><script>/* 前序知识：什么是回调？---我们定义的，我们没有调用，最终执行了。1.同步的回调函数: 理解: 立即在主线程上执行, 不会放入回调队列中。例子: 数组遍历相关的回调函数 2.异步的回调函数: 理解: 不会立即执行, 会放入回调队列中以后执行例子: 定时器回调 / ajax回调 *///演示同步的回调函数/* let arr = [1,3,5,7,9]arr.forEach((item)=>{console.log(item);})console.log('主线程的代码'); *///演示异步的回调函数/* setTimeout(()=>{console.log('@');},2000)console.log('主线程'); */</script>
</body>
</html>

6.3、JavaScript中的error

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>准备_js中的error</title>
</head>
<body><script>/* 进一步理解JS中的错误(Error)和错误处理mdn文档: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error1. 错误的类型Error: 所有错误的父类型ReferenceError: 引用的变量不存在TypeError: 数据类型不正确RangeError: 数据值不在其所允许的范围内--死循环SyntaxError: 语法错误2. 错误处理捕获错误: try{}catch(){}抛出错误: throw error3. 错误对象message属性: 错误相关信息stack属性: 记录信息*///演示：ReferenceError: 引用的变量不存在/* console.log(a); *///演示：TypeError: 数据类型不正确/* const demo = ()=>{}demo()() *///演示：RangeError: 数据值不在其所允许的范围内/* const demo = ()=>{demo()}demo() *///演示：SyntaxError: 语法错误/* console.log(1; *///如何捕获一个错误//try中放可能出现错误的代码，一旦出现错误立即停止try中代码的执行，调用catch，并携带错误信息/* try {console.log(1);console.log(a);console.log(2);} catch (error) {console.log('代码执行出错了,错误的原因是：',error);} *///如何抛出一个错误function demo(){const date = Date.now()if(date % 2 === 0){console.log('偶数，可以正常工作');}else{throw new Error('奇数，不可以工作！')}}try {demo()} catch (error) {debugger;console.log('@',error);}
</script>
</body>
</html>

6.4、初识Promise

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初识Promise</title>
</head>
<body><!-- Promise是什么?1.抽象表达:(1).Promise是一门新的技术(ES6提出的)(2).Promise是JS中异步编程的新方案(旧方案是谁?---纯回调)2.具体表达:(1).从语法上来说: Promise是一个内置构造函数(2).从功能上来说: Promise的实例对象可以用来封装一个异步操作，并可以获取其成功/失败的值-->
<script type="text/javascript">/* 1.Promise不是回调，是一个内置的构造函数，是程序员自己new调用的。2.new Promise的时候，要传入一个回调函数，它是同步的回调，会立即在主线程上执行，它被称为executor函数3.每一个Promise实例都有3种状态：初始化(pending)、成功(fulfilled)、失败(rejected)4.每一个Promise实例在刚被new出来的那一刻，状态都是初始化(pending)5.executor函数会接收到2个参数，它们都是函数，分别用形参：resolve、reject接收1.调用resolve函数会：(1).让Promise实例状态变为成功(fulfilled)(2).可以指定成功的value。2.调用reject函数会：(1).让Promise实例状态变为失败(rejected)(2).可以指定失败的reason。*///创建一个Promise实例对象const p = new Promise((resolve, reject)=>{reject('ok')})console.log('@',p); //一般不把Promise实例做控制台输出</script>
</body>
</html>

主要记忆

executor函数，是一个同步回调函数

三种状态初始化、成功、失败

两个函数 resolve(value) 成功 reject(value)失败 value可以指定生工或失败内容

6.5、Promise基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Promise基本使用</title>
</head>
<body><!-- 1. 重要语法new Promise(executor)构造函数Promise.prototype.then方法2. 基本编码流程1.创建Promise的实例对象(pending状态), 传入executor函数2.在executor中启动异步任务（定时器、ajax请求）3.根据异步任务的结果，做不同处理：3.1 如果异步任务成功了：我们调用resolve(value), 让Promise实例对象状态变为成功(fulfilled),同时指定成功的value3.2 如果异步任务失败了：我们调用reject(reason), 让Promise实例对象状态变为失败(rejected),同时指定失败的reason4.通过then方法为Promise的实例指定成功、失败的回调函数，来获取成功的value、失败的reason注意：then方法所指定的：成功的回调、失败的回调，都是异步的回调。3. 关于状态的注意点：1.三个状态:pending: 未确定的------初始状态fulfilled: 成功的------调用resolve()后的状态rejected: 失败的-------调用reject()后的状态2.两种状态改变pending ==> fulfilledpending ==> rejected3.状态只能改变一次！！4.一个promise指定多个成功/失败回调函数, 都会调用吗?多个then 或者catch方法，都会接收到异步任务的结果，按照顺序来--><script type="text/javascript" >const p = new Promise((resolve,reject)=>{//模拟一个异步任务/* setTimeout(()=>{resolve('我是成功的数据')},2000) *///真正开启一个异步任务const xhr = new XMLHttpRequest()xhr.onreadystatechange = ()=>{if(xhr.readyState === 4){//readyState为4代表接收完毕，接收的可能是：服务器返回的成功数据、服务器返回的错误if(xhr.status === 200) resolve(xhr.response)else reject('请求出错')}}xhr.open('GET','https://api.apiopen.top/getJoke')xhr.responseType = 'json'xhr.send()})p.then((value)=>{console.log('成功了1',value);}, //成功的回调-异步(reason)=>{console.log('失败了1',reason);} //失败的回调-异步)console.log('@');</script>
</body>
</html>

6.6、封装一个简单的ajax

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>封装一个简单的ajax</title>
</head>
<body>
<script type="text/javascript">/*定义一个sendAjax函数，对xhr的get请求进行封装：1.该函数接收两个参数：url(请求地址)、data(参数对象)2.该函数返回一个Promise实例(1).若ajax请求成功,则Promise实例成功,成功的value是返回的数据。(2).若ajax请求失败,则Promise实例失败,失败的reason是错误提示。*/function sendAjax(url,data){return new Promise((resolve,reject)=>{//实例xhrconst xhr = new XMLHttpRequest()//绑定监听xhr.onreadystatechange = ()=>{if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status < 300) resolve(xhr.response);else reject('请求出了点问题');}}//整理参数let str = ''for (let key in data){str += `${key}=${data[key]}&`}str = str.slice(0,-1)xhr.open('GET',url+'?'+str)xhr.responseType = 'json'xhr.send()})}const x = sendAjax('https://api.apiopen.top/getJoke',{page:1,count:2,type:'video'})x.then((data)=>{console.log('成功了',data);},(reason)=>{console.log('失败了',reason);})</script>
</body>
</html>

6.7、纯回调的方式封装ajax

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>封装一个简单的ajax(纯回调)</title>
</head>
<body>
<script type="text/javascript">/*定义一个sendAjax函数，对xhr的get请求进行封装：1.该函数接收4个参数：url(请求地址)、data(参数对象)、success(成功的回调)、error(失败的回调)*/function sendAjax(url,data,success,error){//实例xhrconst xhr = new XMLHttpRequest()//绑定监听xhr.onreadystatechange = ()=>{if(xhr.readyState === 4){//响应了消息，至于是骂你的还是夸你的就得用status来判断了if(xhr.status >= 200 && xhr.status < 300) success(xhr.response);else error('请求出了点问题');}}//整理参数let str = ''for (let key in data){str += `${key}=${data[key]}&`}str = str.slice(0,-1)xhr.open('GET',url+'?'+str)xhr.responseType = 'json'xhr.send()}sendAjax('https://api.apiopen.top/getJoke',{page:1,count:2,type:'video'},response =>{console.log('第1次成功了',response);sendAjax('https://api.apiopen.top/getJoke',{page:1,count:2,type:'video'},response =>{console.log('第2次成功了',response);sendAjax('https://api.apiopen.top/getJoke',{page:1,count:2,type:'video'},response =>{console.log('第3次成功了',response);}, err =>{console.log('第3次失败了',err);})}, err =>{console.log('第2次失败了',err);})}, err =>{console.log('第1次失败了',err);})
</script>
</body>
</html>

肉眼可见采用纯回调会发生回调地狱的问题，尽管在Jquery1.5以后实现了PromiseA+规范，但是由于新兴起的axios非常好用，也就不在考虑使用Jquery的Ajax

6.7、常见的包管理器对比

cnpm yarn npm pnpm

cnpm阿里出品，这个东西我们一般是用他的国内镜像。这个东西有一个很大的缺点，cnpm安装的东西他有一个缺点，他会给他建立一个快捷方式，随这你安装更多的包，他的快捷方式会越来越大，这都是不是主要的，问题是他在卸载某个包的时候他会把你安装的所有包都给卸载掉，他又三种卸载包的命令，都存在这种问题。他也没有打算处理。所以不要用它

测试npm、初始化一个项目，包名能起跟主流库一样的名字嘛，不能！那冲突能咋的呀？也不报错啊，有一严重的问题，你自己初始化的包名叫做jquery的时候，就导致你下载不下来真正的Jquery这个库，你本身就是jquery，还怎么下载jquery,但是yarn就没有这个问题 yarn add,yarn的算法比较优秀，他的缓存文件做也不错。用yarn还是比较不错的。下载速度也比较快，目前我电脑上是这么使用包管理器的 yarn的命令，因为yarn他对包的索引啊，遍历啊对比啊，他的速度非常快，用yarn的命令，用cnpm的仓库地址，这俩人配合起来安装包是特别快的，但是个别时候，如果说由于网络状况导致yarn可能不好用，那我顶多用下npm,cnpm那基本上是不会用的

6.8、复习

Ajax跨域问题、同源策略

jsonp解决跨域问题，前端script标签发送get请求不受到同源策略的影响、然后把数据带回来、前端定义函数、后端调用函数

jQuery封装的jsonp

uuid、随机的生成一个字符串，至少在几百年内唯一的这么一个id、一种特殊的算法、所处的地理位置、经纬度、以及当前电脑的时间，内存条的序列号，网卡的mac地址，这些东西给你拼凑，然后经过一个算法生成的

cors解决跨域、浏览器的ajax引擎 xhr得借助ajax引擎，ajax引擎特别听一个人的话那就是同源策略，你打他一顿，下次他不敢拦你了，这是把问题解决了

jquery的jsonp是绕过去了、cors是怎么解决的，你得需要一些特殊的响应头，同源策略并不是限制请求不能发送过去，而是限制的请求不能回来，他的策略就是，他相应数据的时候并不单单把数据响应回来，而是给你的脑门上贴一些特殊的相应头，

Access-Control-Allow-Origin

访问-控制-允许-源

Access-Control-Expose-Headers —能解决简单请求 get post

访问-控制-暴漏-请求头

Access-Control-Allow-Methods --put delete, 复杂请求会发送两次请求，第一次是嗅探请求，也被称为是预请求 options

访问-控制-允许-方法

反向代理工具解决跨域问题

函数对象与实例对象

回调函数

我们定义的，我们没有调用，但是自己执行了

回调函数的分类

同步的回调、主线程上立即执行，不进回调队列（数组遍历相关的回调）

异步的回调、不会立即执行、会放入回调队列（定时器回调/ajax回调）

js的错误类型/错误的处理

Promise初步认识（Es6）异步编程的新方案，就方案，纯回调三个状态两个回调、是一个内置的构造函数

作用是封装一个异步任务，构造函数，传入一个执行器函数，封装异步任务，切换Promise状态，.then执行成功和失败的回调

//创建一个Promise实例对象
const p = new Promise((resolve, reject)=>{reject('ok')
})
console.log('@',p); //一般不把Promise实例做控制台输出

6.9、验证Promise的返回值

实验：.then方法会返回一个新的Promise实例对象。(暂且不研究返回的这个新Promise实例状态怎么变化)

const p = new Promise((resolve,reject)=>{setTimeout(()=>{resolve(100)},1000)
})
const x = p.then(value => {console.log('成功了',value);},reason =>{console.log('失败了',reason);}
)
console.log('50',x); 
//他是p嘛?
console.log(p===x)?

结论：.then方法返回一个新的Promise实例

6.1、PromiseApi解读

1、刚才我们已经讲了，Promise是一个内置的构造函数，他内部的执行器函数，有两个参数函数resolve函数和reject函数

2、Promise.then的返回值是一个新的Promise实例

3、代码折叠问题 #region #endregion

4、Promise.prototype.catch方法是Promise原型对象上的方法，是给实例用的、一般我们使用Promise的步骤就是，new 一个实例，在executor函数中封装异步任务，切换Promise实例的状态,.then执定成功的回调失败的回调，例如如下代码

const p = new Promise((resolve,reject)=>{setTimeout(()=>{resolve(100)},1000)
})
const x = p.then(value => {console.log('成功了',value);},reason =>{console.log('失败了',reason);}
)
console.log('50',x); 
//他是p嘛?
console.log(p===x)?

思考一个问题如果我要是不想指定成功的回调，控制台会报错嘛

const p = new Promise((resolve,reject)=>{setTimeout(()=>{resolve(100)},1000)
})
const x = p.then(undefined,reason =>{console.log('失败了',reason);}
)
console.log('50',x);

不会报错？他的底层进行了处理，你要是没指定，就证明你不想指定，但是他并不会报错

现在我们传递的是一个undefined他不会报错，那么还可以传什么？空数组，空对象，null

想调用.then但是你就还不想指定成功的回调，官方推荐的做法，就是undefined

其实更好的做法就是使用.catch()

const p = new Promise((resolve,reject)=>{setTimeout(()=>{reject(-100)},1000)
})
p.then(value => {console.log('成功了1',reason);},reason => {console.log('失败了1',reason);}
)
p.catch(reason => {console.log('失败了2',reason);}
)

执行结果？

失败了1 失败了2、Promise内部有一个队列，放一组一组的回调

分析执行结果

const p = new Promise((resolve,reject)=>{setTimeout(()=>{reject(100)},1000)
})
p.then(value => {console.log('成功了',reason);},
)
p.catch(reason => {console.log('失败了',reason);}
)

切换成功状态，正常输出成功了

切换失败状态，输出失败了 100 和uncaught(in promise) 100

什么时候回出现uncaught(in promise)

那就是你不指定失败的回调就会返回这个东西，抛出了一个异常

他是按照队列的顺序，一个一个调用的，所以回出现这个问题，他跟刚才一个道理，只不过人家处理了默认就是成功了就是不抛出异常

因为MDN上说了，成功是一个积极向上的行为，所以不进行抛出异常

5、Promise.reject方法: Promise.reject方法(reason)

说明: 用于快速返回一个状态必为rejected的Promise实例对象

const p0 = Promise.reject(-100)
p0.then(value => {console.log('成功了',value);},reason => {console.log('失败了',reason);}
)

函数自身上的，和函数原型对象上的还不一样，放原型对象那么就是给实例用的，如果放在自身就是给自己用的，为啥要设计一个这样的api那？

我们想弄出来一个状态为成功或者状态的Promise，我该怎么写

原始写法

const p = new Promise((resolve,reject)=>{setTimeout(()=>{//成功或者失败reject(100)},1000)
})
p.then(value => {console.log('成功了1',reason);},reason => {console.log('失败了1',reason);}
)

简单写法

const p0 = Promise.reject(-100)
p0.then(value => {console.log('成功了',value);},reason => {console.log('失败了',reason);}

6、Promise.resolve方法: Promise.resolve(value)、

说明：用于快速返回一个状态为fulfilled或者rejected的Promise实例对象

有一句关键的话，返回一个状态为fulfilled或者rejected的Promise,为啥不跟reject一样，我调用你我就是返回一个状态为成功的Promise实例

唉这个还真有点不一样，因为他的状态会根据Promise.resolve(value) ，value不同返回不同状态的Promise实例

几种情况、两种！非Promise值、那么就是成功、Promise值，不确定，传入的Promise实例是成功那么就是成功，失败的就是失败的

开发中不会写出这种代码的，一般都是面试代码分析

7、Promise.all(promiseArr)

promiseArr: 包含n个Promise实例的数组

说明: 返回一个新的Promise实例, 只有所有的promise都成功才成功, 只要有一个失败了就直接失败。

const p1 = Promise.resolve('a')
const p2 = new Promise((resolve,reject)=>{setTimeout(()=>{reject('b')},500)
})
const p3 = new Promise((resolve,reject)=>{setTimeout(()=>{reject('c')},2000)
})
const x = Promise.all([p1,p2,p3])
x.then(value => {console.log('成功了',value);},reason => {console.log('失败了',reason);}
)

都成就成，把结果都拿回来，有一个失败就失败,顺序有关系吗？没有

7、Promise.race(promiseArr)