个人中心 | 微信开放社区

JavaScript-this

JavaScript-this 分享最近又在this的指向中迷惑了，虽然之前学过一次，丝毫不影响再次掉坑，这次又捋了一遍，加深影响！其实在javascript中this的指向主要有四种默认绑定（全局对象严格模式下为undefined）隐式绑定（谁调用this指向谁）显示绑定（call bind apply） new绑定！而在箭头函数里面，这四种都不适合，因为ES6规定箭头函数是没有this的，所以它只能继承，继承外层作用域中的this，也就是要看箭头函数所定义使用的地方(宿主对象)。网上找了好多this指向的资料，个人觉得这两个总结得很好，大家可以看一下，结合两篇文章，相信大家对this得指向问题会更加清晰。 js 中的this，默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解_toforu.com-CSDN博客 ①this指向四种：默认，隐式，显示call apply bind，new构造函数②优先级③new构造函数有无return④new做了什么⑤严格模式指向_lazylYYY的博客-CSDN博客下面是阮一峰老师讲得this原理，大家也可以看一下！ JavaScript 的 this 原理 - 阮一峰的网络日志 (ruanyifeng.com) Node中的this和浏览器中的this的区别大家注意，虽然node和浏览器都是js的运行环境，但node中this和浏览器中的this还是稍有不同的浏览器中的全局对象是window，node的全局对象是global 浏览器最外层的的this是windows,而node中最外层的this并不是全局对象global，而是module.export [代码]//在node环境下 console.log(this==global) //false console.log(this==module.exports) //true this.a=1; console.log(module.exports.a) //1 b=2; //不用var声明的变量默认作为全局对象的属性 [代码] module.export是es6实现模块化的新特性，大家有兴趣可以了解一下。 vue中的this 在vue中的this，其实在vue的设计转化下，this一般指向vue实例在Vue所有的生命周期钩子方法(created,mounted等等)和普通方法（method里面定义），this指向调用它的vue实例其他情况可以参考js的this指向作用域和原型的区别当访问某个变量是，就是要通过作用域链去查找了，而访问某个对象的属性时，这个时候就时要通过原型链去找了了。这其实也是有关变量和属性的区别，变量是属于作用域的范畴，而属性其实应该是属于原型的范畴当我们定义一个变量是，比如 var a=1；其实a不是this里面的属性，a只是一个变量。变量和属性一个很大的区别就是，属性可以删除，而变量不可以 [代码]var a=1; this.b=2; delete a; //false delete this.b ;//true [代码]

2021-11-22

4收藏2评论440浏览

mongodb知识点总结

mongodb知识总结微信云开发使用的云数据库集成了简化版的mongodb，因此学习两者之一就可以很快掌握另一个 mongoDB 开篇 [代码]     [代码] 快速上手 [代码] [代码] 主键 [代码] [代码] 创建文档 [代码]    [代码] 读取文档查询文档 [代码] [代码] 比较运算符 [代码]  [代码] 逻辑操作符 [代码] [代码] 字段操作符 [代码] [代码] 数组操作符 [代码] [代码] 运算操作符：正则表达式 [代码] [代码] 文档游标 [代码] [代码] 分页方法 [代码] [代码] 排序函数 [代码] [代码] 统计函数 [代码] [代码] 更新文档 save方法 [代码] [代码] update方法 [代码] [代码] $set更新操作符 [代码] [代码] $unset更新操作符 [代码] [代码] $rename重命名操作 [代码] [代码] $inc$mul更新操作符 [代码] [代码] $max$min更新操作符 [代码] [代码] $addToSet数组更新操作符 [代码] [代码] $push更新操作符 [代码]  [代码] $pull更新操作符 [代码] [代码] $pullAll更新操作符 [代码] [代码] $和$[]更新操作符 [代码] [代码] 删除文档 [代码] [代码] 聚合操作 $project [代码] [代码] $match [代码] [代码] $limit和$skip [代码] [代码] $unwind [代码] [代码] $sort [代码] [代码] $lookup [代码] [代码] $lookup相关查询 [代码] [代码] $group [代码] [代码] $out [代码] [代码] 配置 [代码]  [代码] 数据类型转换 [代码] [代码]

2021-11-17

7收藏1评论1280浏览

新一代的WEB开发与构建工具-vite

vite 由 vue 开发者尤雨溪尤大开发的新一代的前端开发与构建工具，基于浏览器 ES module 来开发 web 应用的方式。两点最佳性能：极速的服务启动（无需打包）轻量快速的热重载HMR（再也不用编辑完代码看效果等老半天了）我觉得真的是实现了按需编译了，在开发环境下简直是开发者的知音，那速度，你知道什么叫飞一般的感觉吗，在生产环境下实际使用的是 rollup ，而 rollup 最大的特点就是 TreeShaking ,一种采用删除不需要的额外代码的方式优化代码体积的技术,但其实 webpack后来也增加了 TreeShaking 的功能，所以在生产环境下，其实个人还不太知道vite的优势。 webpack和vite webpack毕竟是老大哥，论社区生态和兼容性，vite还是比不了的。其实就像尤大在知乎上说的，vite的目标本来就不是干掉webpack，webpack core只针对打包不限定场景，几乎所有可配置的环节都做成了可配置的，它的灵活性自然是很高的，而vite是限定了web的场景，用限定场景来降低复杂度。术业有专攻，所以我觉得vite在web场景下是做的比webpack好的，下面就是webpack和vite的一个很大的区别： [图片][图片] 不过vite毕竟是新兴工具，所以可能在一些兼容性还做得不是很好，而且在配置上会略显繁琐，特别是webpack转vite,可能需要改很多配置，刨坑…但相信尤大的能力，将来vite会是web构建工具的首选！期待！感激这些大佬们的贡献，让我们这些小白站在巨人的肩膀上开发的更顺畅！参考链接当我尝试着把老项目 Webpack 迁移到 Vite 时，发现并没有这么香 - 云+社区 - 腾讯云 (tencent.com)

2021-11-17

1收藏3评论1403浏览

前端页面性能优化

前端性能优化基础优化像代码优化，避免使用复杂的 js css 代码，善用keep-alive，减少重复沉余操作等等基础的优化这里就不详细说啦，但同样重要！今天主要讲一下几种优化项目的方式。路由懒加载（很重要）配置路由各位前端得伙伴应该不陌生吧，但配置路由假如用的时一般加载，如果项目得模块少还好，要是十几个，再大点几十个上百个，一下子把所有组件都加载一遍，估计等项目加载完用户都怀疑是不是网络出问题了，自己开发预览也会很难受吧。 [代码]//一般加载 import component1 from "....." { // path: // name: component:component1 } //懒加载 { // path: // name: component:()=>import('.....') } //import是ES6的一个语法标准，如果需要浏览器兼容，需要转化成es5的语法。 [代码] 其实项目编译打包后，会把每个路由组件的代码分割成一一个 js 文件，初始化时不会加载这些 js 文件，只有当激活路由组件才会去加载对应的js文件。 gzip静态资源压缩有些文件确实不能再优化了，那我们是不是可以考虑把它压缩了呢。其实原理很简单，开启gzip压缩把那些大得js，css文件进行压缩，压缩比率在3到10倍左右，这样从服务器获取数据的时候（需要服务器配置），再由浏览器去解压加载，这样可以大大节省服务器的网络带宽，提高资源获取的速度。不同的脚手架可能配置不太一样，但都大同小异，我这里用的是webpack，大家可以参考一下。打开config/index.js文件 [代码]//找到下面啊的代码 // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, //把这里改成true productionGzipExtensions: ['js', 'css'], [代码] 然后安装依赖： [代码]npm install --save-dev compression-webpack-plugin@1.1.12 //注意高版本安装可能会报错，不过不确定是不是高版本不适配的原因，这里指定版本@1.1.12 [代码] 打开/build/webpack.base.config.js文件，找到module.exports的module中的rules,把limit从10000改小一点，这里改成1000 [代码] module: { rules: [{ test: /\.scss?$/, loaders: ["style", "css", "sass"] }, { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 1000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 1000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 1000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] }, [代码] 为什么要改这里呢？因为 vue 中一些小的静态资源文件是会打包成base64的文件存在css中的或者js中，这里就是控制需要转换的大小，这样减少了js的大小。服务器端(下面以Nginx为例) 打开配置文件一般都会默认开启gzip的，但是gzip_static 是没有开启的，所有需要加上 gzip_static on; 如果没有开启gzip的话可以在手动在http{}里添加 [代码]http { gzip on; gzip_static on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_http_version 1.1; gzip_comp_level 2; gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml; gzip_vary on; gzip_proxied expired no-cache no-store private auth; gzip_disable "MSIE [1-6]\."; } [代码] webpack 的 Gzip 和服务端的 Gzip 其实服务端配置好Gzip就可以实现用户向服务器请求，服务器把资源压缩发送了，那为什么webpack也要设置呢?主要是为了减轻服务器压缩资源的负担，如果我们生产环境的资源本身就是压缩了的，那么服务器就不用压缩啦，自然就减轻了服务端的压力。建议两边都配置一下。减少HTTP请求不影响需求的前提下，尽可能减少http请求改善响应时间最简单，最直接的途径当是较少 http 请求啦，有一些一个链接能搞定的就不要分几个链接来请求，也可以用巧用一些缓存来避免重复的http请求。使用CDN 如果应用程序web服务器离用户更近，那么一个HTTP请求的响应时间将缩短。另一方面，如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。 CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。例如，CDN可能选择网络阶跃数最小的服务器，或者具有最短响应时间的服务器。 CDN还可以进行数据备份、扩展存储能力，进行缓存，同时有助于缓和Web流量峰值压力。 CDN的缺点： 1、响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。 2、如果CDN服务质量下降了，那么你的工作质量也将下降 3、无法直接控制组件服务器按需加载第三方库有时候我们开发的页面白屏时间长，打开开发者工具，看 network 那里，一般都是 vender.js 这个资源获取时间长达几s，第三方库一般都会打包到 vender.js ，就像我们常用到的 element.ui ，其实它的库是很大的，一般不设置都是整个库加载上来，自然加载慢了。我们可以把第三方库通过 CDN 的方式引入第三方库，这样vendor.js会减少，大大提升首屏加载速度，具体怎么使用大家可以搜一下，这里就不详细介绍啦。图片压缩这个是我自己以身示范的一个坑，在一个项目的登录界面我用了一张照片做背景，后来发现每次加载登录的界面都是超级慢，细究才发现，我这张照片10几m…加载时间自然短不了，所以照片压缩很必要。参考链接 Web前端性能优化——如何提高页面加载速度 vue项目webpack打包app.js文件太大导致首次加载非常缓慢的解决方案

2021-11-16

2收藏8评论1197浏览

JavaScript_Promise的总结

JavaScript-Promise总结前言：最近在做项目对接后端接口时，遇到了一个bug，和promise有关，于是在网上找资料，找啊找，发现自己对Promise的了解还是很生疏的，于是就开始了对promise的学习，刚好最近也想开始写一些文章来记录自己的学习路程，也希望可以帮助到大家。然后，就开始了我前端之路的第一篇知识输出文章，请大家多多指教！正文： Promise概述异步编程是JavaScript一大特点，建议大家先了解一下JavaScript的异步编程实现，这里推荐一篇文章—JavaScript异步编程 - 熊建刚的文章 - 知乎 https://zhuanlan.zhihu.com/p/26567159 Promise是实现异步编程的一种解决方案，比传统的的解决方案（回调函数和事件）更加先进，先进在哪里呢？上代码！ [代码]//传统异步编程方式 setTimeout(function(){ console.log("doThing1"); setTimeout(function(){ console.log("doThing2"); setTimeout(function(){ console.log("doThing3"); setTimeout(function(){ console.log("doThing4"); },1000) },1000) },1000) },1000) //promise实现 let p1=new Promise((resolve,reject)=>{ setTimeout(function () { console.log("doThing1"); resolve(); }, 1000); }) let p2=new Promise((resolve,reject)=>{ setTimeout(function () { console.log("doThing1"); resolve(); }, 1000); })v let p3=new Promise((resolve,reject)=>{ setTimeout(function () { console.log("doThing1"); resolve(); }, 1000); }) let p4=new Promise((resolve,reject)=>{ setTimeout(function () { console.log("doThing1"); resolve(); }, 1000v); }) p1.then(p2).then(p3).then(p4); [代码] 上面的代码，我们想按照顺序去做4件事情，如果按照传统的方式来实现很容易造成“函数瀑布”，这样的代码被称为“回调地狱”，看起来就很头疼，像promise这样实现更为直观，维护起来也方便很多，这仅仅是代码书写上的优势，在一些错误处理，顺序性等等都比传统异步编程更为优化，这里就不做深究了。 “Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息”。一个 Promise对象会将异步操作的最终结果和结果的处理程序关联起来（成功or失败），那么自然就要求promise需要有状态，我们才可以知道promise现在是成功了还是失败了。 Promise的状态： pending（等待），初始状态，未知操作成功还是失败 fulfilled(已完成)，最终状态，操作成功，可以调用成功处理程序 rejected(已失败)，最终状态，操作失败，可以调用失败处理程序这里引入一个例子：小明的妈妈在做家务没空买菜，那么她叫小明去买菜，这个任务就是一个promise，好，小明去买菜了，小明买菜这个过程是一个异步操作，那么小明买菜的结果是什么呢？这就是说这个命令有没有完成？有两种情况，第一种是小明成功买到菜了，接下来小明妈妈就是做饭啦，第二种情况，小明把钱拿去打游戏了没买到菜，接下来小明妈妈就是把他打一顿啦… 接下来讲promise的使用都会用到这个例子。 Promise的方法 Promise（）-promise的构造函数作用：创建一个新的 [代码]Promise[代码] 对象。该构造函数主要用于包装还没有添加 promise 支持的函数。 Promise接受函数两个参数（resolve, reject），当异步任务成功时，调用第一个参数resolve，将promise对象的状态设为fulfilled，并返回成功值；失败时将调用第二个参数reject将promise对象的状态设为rejected，并返回失败原因；使用： [代码]let order=new Promise((resolve,reject)=>{ setTimeout(()=>{ //小明买菜ing // （1）小明一路破关斩将，抵御各种诱惑，成功买到一条鱼和一斤牛肉 //（2）小明看到菜市场旁边的游戏厅，被里面的游戏所吸引，把钱全花在打游戏那里了，没有买到菜 //小明回到家告诉妈妈 resolve("我买到菜了！买了一条鱼和一斤牛肉") //reject("我没有买到菜，钱全花在打游戏了......") //敢作敢当.... },1000)//这里用setTimeout来模拟小明去买菜这个异步任务 }) [代码] 注意！promise的状态一经决定，无法改变，所以当用了resolve再用reject时reject不起效果，promise状态仍是fulfilled [代码]Promise.prototype.then()[代码] 作用：这个方法可以获取promise的状态，并进行结果处理。它最多需要有两个参数：Promise 的成功和失败情况的回调函数。语法： [代码]promise.then(value => { // fulfillment }, reason => { // rejection }); [代码] 使用： [代码]let order=new Promise((resolve,reject)=>{ setTimeout(()=>{ //小明买菜ing // （1）小明一路破关斩将，抵御各种诱惑，成功买到一条鱼和一斤牛肉 //（2）小明看到菜市场旁边的游戏厅，被里面的游戏所吸引，把钱全花在打游戏那里了，没有买到菜 //小明回到家告诉妈妈 resolve("我买到菜了！买了一条鱼和一斤牛肉") //reject("我没有买到菜，钱全花在打游戏了......") //敢作敢当.... },1000)//这里用setTimeout来模拟小明去买菜这个异步任务 }) order.then((res)=>{ console.log(res); console.log("妈妈夸了一顿小明，并做了红烧鱼和爆炒牛肉"); },(err)=>{ console.log(err); console.log("妈妈打了一顿小明，并决定今晚出去吃"); //好像小明这样做确实不错，可以出去吃了 }) //输出结果：我买到菜了！买了一条鱼和一斤牛肉妈妈夸了一顿小明，并做了红烧鱼和爆炒牛肉 //如果是reject("我没有买到菜，钱全花在打游戏了......") 我没有买到菜，钱全花在打游戏了...... 妈妈打了一顿小明，并决定今晚出去吃 [代码] tips: 由于 then 和 [代码]Promise.prototype.catch()[代码]方法的返回值都是 promise，它们可以被链式调用——这同时也是一种被称为复合（ composition）的操作。 [代码]//类似 p1.then(p2).then(p3).then(p4).catch(p5).then(p6)....... [代码] [代码]Promise.prototype.catch()[代码] 作用：这个方法主要获取promise错误状态，并进行结果处理。其实和[代码]promise.then(undefined,onRejected)[代码]时一样的，不过promise.then优先（等下会有示例）。语法： [代码]promise.catch(function(reason) { // 拒绝z }); [代码] 使用： [代码]let order=new Promise((resolve,reject)=>{ setTimeout(()=>{ //小明买菜ing // （1）小明一路破关斩将，抵御各种诱惑，成功买到一条鱼和一斤牛肉 //（2）小明看到菜市场旁边的游戏厅，被里面的游戏所吸引，把钱全花在打游戏那里了，没有买到菜 //小明回到家告诉妈妈 // resolve("我买到菜了！买了一条鱼和一斤牛肉") reject("我没有买到菜，钱全花在打游戏了......") //敢作敢当.... },1000)//这里用setTimeout来模拟小明去买菜这个异步任务 }) order.catch(err=>{ console.log("catch err: "+err); console.log("妈妈打了一顿小明，并决定今晚出去吃"); }) //输出结果： catch err: 我没有买到菜，钱全花在打游戏了...... 妈妈打了一顿小明，并决定今晚出去吃 [代码] tips: 当和[代码]promise.then(undefined,onRejected)[代码]同时存在时，onRejected优先 [代码]//构造Promise order同上 order.then(undefined,err=>{ console.log("then err: "+err); }) .catch(err=>{ console.log("catch err: "+err); }) //输出结果： then err: 我没有买到菜，钱全花在打游戏了...... [代码] catch可以捕获then()里面的函数 [代码]order.then(undefined,err=>{ console.log("then err: "+err); throw Error("then出错了") }) .catch(err=>{ console.log("catch err: "+err); }) //输出结果 then err: 我没有买到菜，钱全花在打游戏了...... catch err: Error: then出错了 [代码] 3.当在链式调用时，catch可以捕获前面任意一个then中的错误，这也就是说我们写代码的时候最好可以用上catch [代码]//类似 p1.then(p2).then(p3).then(p4).then(p5).catch(err)....... //catch可以捕获p2 p3 p4 p5中任意一个中的错误 [代码] [代码]Promise.prototype.finally()[代码] 作用：当promise结束是，无论最终状态如何，fulfilled还是rejected，都会执行指定回调函数语法： [代码]promise.finally(function() { // 返回状态为(resolved 或 rejected) }); [代码] 使用： [代码]let order=new Promise((resolve,reject)=>{ setTimeout(()=>{ //小明买菜ing // （1）小明一路破关斩将，抵御各种诱惑，成功买到一条鱼和一斤牛肉 //（2）小明看到菜市场旁边的游戏厅，被里面的游戏所吸引，把钱全花在打游戏那里了，没有买到菜 //小明回到家告诉妈妈 // resolve("我买到菜了！买了一条鱼和一斤牛肉") reject("我没有买到菜，钱全花在打游戏了......") //敢作敢当.... //promise的状态一经决定，无法改变，所以当用了resolve再用reject时reject不起效果，promise状态仍是fulfilled },1000)//这里用setTimeout来模拟小明去买菜这个异步任务 }) order.then((res)=>{ console.log(res); console.log("妈妈夸了一顿小明，并做了红烧鱼和爆炒牛肉"); },(err)=>{ console.log(err); console.log("妈妈打了一顿小明，并决定今晚出去吃"); //好像小明这样做确实不错，可以出去吃了 }).catch((err)=>{ //获取前面出现的错误，有可能妈妈做饭的时候鱼被猫吃了....... }).finally(()=>{ console.log("无论结果如何，最终都是要吃饭的！事已至此，先吃饭吧。。。。"); }) //输出结果我没有买到菜，钱全花在打游戏了...... 妈妈打了一顿小明，并决定今晚出去吃无论结果如何，最终都是要吃饭的！事已至此，先吃饭吧。。。。 [代码] [代码]Promise.resolve()[代码] 作用：返回一个带有成功参数的[代码]Promise[代码]对象。注意此时的promise对象已是fulfilled的最终状态。参数：如果参数是一个值，将把这个值作为返回的promise的成功参数如果这个值是一个 promise ，那么将返回这个 promise 如果是一个thenable，返回的promise会“跟随”这个thenable的对象，采用它的最终状态。 [代码]thenable：[代码] [代码]thenable[代码]是任何含有then()方法的对象或函数，作用使promise的实现更具有通用性类似： [代码]let thenable = { then: (resolve, reject) => { resolve(thenable) } } [代码] 判断一个对象是不是thenable，用到类型检查，也称为鸭式辩型 [代码]if(p!=null&&(typeof p==="object"||typeof p==="function")&&(typeof p.then==="function")){ //p是一个thenable }else{ //p不是一个thenable } [代码] 示例： [代码]let thenable = { then: (resolve, reject) => { resolve("thenble最终状态") } } let promise=Promise.resolve(thenable) promise.then((res)=>{ console.log(res) },err=>{ //用不上 } ) //打印结果 //thenble最终状态 let promise1 = Promise.resolve(11111); let promise=Promise.resolve(promise1) promise.then((res)=>{ console.log(res) },err=>{ //用不上 } ) //打印结果 //11111 let promise=Promise.resolve(2222) promise.then((res)=>{ console.log(res) },err=>{ //用不上 } ) //打印结果 //22222 [代码] [代码]Promise.reject()[代码] 作用：返回一个带有拒绝原因的[代码]Promise[代码]对象。注意此时的promise对象已是rejected的最终状态和[代码]Promise.resolve()[代码]的区别 [代码]Promise.reject[代码] 方法的参数，会原封不动地作为 reject 的参数，变成后续方法的参数。这一点与 [代码]Promise.resolve[代码] 方法不一致。 [代码] //Promise.resolve() 和Promise.reject()的区别 const thenable ={ then(resolve, reject){ // resolve("成功了") reject('出错了'); } }; //Promise.resolve() 和Promise.reject()的区别 //Promise.resolve(thenable) Promise.reject(thenable) .then(res=>{ console.log("then res: "+res) console.log(res===thenable) }) .catch(err =>{ console.log("catch err: "+err) console.log(err===thenable) }) //打印结果 catch err: [object Object] true //当执行Promise.resolve(thenable) catch err: 出错了 false [代码] 对resolve（thenable）结果解析：当thnable传入resolve时，将立即执行thnable的then方法,resolve返回它的最终状态reject(‘出错了’)，此时resolve返回的promise参数并不是一个thnable了，而是“出错了” 而当thnable传入rejected时，并不会执行thnable的then方，而是原封不动将thnable作为resolve返回的promise参数 [代码]Promise.all()[代码] 作用：整合多个promise示例，返回最终一个promise实例参数：一个promise的[代码]iterable[代码]类**（注：Array，Map，Set都属于ES6的iterable类型）** 返回值： Promise的resolve回调执行是在所有输入的promise的resolve回调都结束，或者输入的iterable里没有promise了的时候只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误，并且reject的是第一个抛出的错误信息。个人觉得有点像与操作了，当所有promise都fulfilled时，返回的promise才是fulfilled，完成状态的结果都是一个数组，它包含所有的传入迭代参数对象的值（也包括非 [代码]promise[代码] 值）；而当任意一个promise失败时，返回的promise时rejected，Promise.all()异步地将失败的那个结果给失败状态的回调函数，而不管其它 [代码]promise[代码] 是否完成。 [代码]let promise1=Promise.resolve("小明成功买到菜了"); let promise2=Promise.reject("小明没晾衣服"); let promise3=Promise.resolve("小明刷完高数了"); Promise.all([promise1, promise2, promise3]).then(res => { console.log(res); }); //打印结果 [ '小明成功买到菜了', '小明晾衣服了', '小明刷完高数了' ] let promise1=Promise.resolve("小明成功买到菜了"); let promise2=Promise.reject("小明没晾衣服"); let promise3=Promise.resolve("小明刷完高数了"); let promise=Promise.all([promise1, promise2, promise3]); setTimeout(()=>{ console.log(promise) },0) //打印结果 Promise { <rejected> '小明没晾衣服' } [代码] 至于第二个例子我为什么要用setTimeout,大家可以保留疑问，假如直接打印，结果会是[代码]Promise { <pending> }[代码]，这就涉及到Promise的异步处理，文章后我会讲解 [代码]Promise.allSettled()[代码] 作用：方法返回一个在所有给定的promise都已经[代码]fulfilled[代码]或[代码]rejected[代码]后的promise，并带有一个对象数组，每个对象表示对应的promise结果。如果有多个彼此不依赖的异步任务完成时，然后你要知道所有promise的结果，又不想一个一个地获取时，可以用到这个。相反，假如你的异步任务有依赖则要用Promise.all() 参数：和[代码]Promise.all()[代码]一致示例： [代码]let promise1=Promise.resolve("小明成功买到菜了"); let promise2=Promise.reject("小明没晾衣服"); let promise3=Promise.resolve("小明刷完高数了"); Promise.allSettled([promise1, promise2, promise3]).then((result)=>{ result.forEach((item)=>{ console.log(item) }) }) //打印结果 [ { status: 'fulfilled', value: '小明成功买到菜了' }, { status: 'rejected', reason: '小明没晾衣服' }, { status: 'fulfilled', value: '小明刷完高数了' } ] [代码] [代码]Promise.race()[代码] 作用：返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。 race-比赛，看哪个promise最先被定义最终状态，则返回该结果参数：和[代码]Promise.all()[代码]一致示例： [代码]const promise1 = new Promise((resolve, reject) => { setTimeout(resolve, 500, '小明做完作业了'); //小明做完作业花费了500ms }); const promise2 = new Promise((resolve, reject) => { setTimeout(resolve, 100, '小东做完作业了'); //小东做完作业花费了100ms }); let promise=Promise.race([promise1, promise2]); setTimeout(()=>{ console.log(promise) },1000); //打印结果 Promise { '小东做完作业了' } const promise1 = new Promise((resolve, reject) => { setTimeout(resolve, 500, '小明做完作业了'); //小明做完作业花费了500ms }); const promise2 = new Promise((resolve, reject) => { setTimeout(reject, 100, '小东不想作业了'); //小东100ms后就说不做作业了... }); let promise=Promise.race([promise1, promise2]); setTimeout(()=>{ console.log(promise) },1000); //打印结果 Promise { <rejected> '小东不想作业了' } [代码] [代码]Promise.any()[代码] 作用：与[代码]Promise.all()[代码]相反，及相当于做或操作，只要有一个promise成功了，那么最终结果就成功（只返回第一个成功的promise），如果都不成功，最终promise才为rejected。参数：和[代码]Promise.all()[代码]一致示例： [代码]let promise1 = new Promise((resolve, reject) => { setTimeout(resolve, 500, '小明做完作业了'); //小明做完作业花费了500ms }); let promise2 = new Promise((resolve, reject) => { setTimeout(reject, 100, '小东不想作业了'); //小东100ms后就说不做作业了... }); let promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 100, '小李做完作业了'); //小明做完作业花费了500ms }); Promise.any([promise1, promise2,promise3]).then(res=>{ console.log(res) }) //打印结果 "小李做完作业了" let promise1 = new Promise((resolve, reject) => { setTimeout(reject, 500, '小明不想作业了'); //小明500ms后就说不做作业了... }); let promise2 = new Promise((resolve, reject) => { setTimeout(reject, 100, '小东不想作业了'); //小东100ms后就说不做作业了... }); let promise3 = new Promise((resolve, reject) => { setTimeout(reject, 200, '小李不想作业了'); //小明100ms后就说不做作业了... }); Promise.any([promise1, promise2,promise3]).catch(err=>{ console.log(err.message)}) //打印结果 "All promises were rejected" [代码] Promise的异步执行我们先来看一段代码！ [代码]let promise1 = Promise.resolve(11111); let promise2 = promise1.then(value => { console.log("promise1的value: " + value); return value; }); console.log(promise2); setTimeout(() => { console.log(promise2); }); //打印结果： Promise { <pending> } promise1的value: 11111 Promise { 11111 } [代码] 是不是和你的预期不一样，这就是Promise的异步执行；我们来分析一下：其实代码执行到 [代码]let promise1 = Promise.resolve(11111);[代码] [代码]Promise.resolve[代码]不会在时不会立即执行的，这是交给异步来完成的，那么就顺着执行下面的代码了. 到[代码]let promise2 = promise1.then[代码]时，此时的promise1的状态还是pending，所以promise2也是pending，此时value是undefined的。然后就是执行[代码]console.log(promise2)[代码]，所以打印的第一个是[代码]Promise { <pending> }[代码]，之后再[代码]setTimeout[代码]，此时promise1 promise2才是操作完成的，value是111。这也是和JavaScript的异步编程有关！ Promise的缺点一旦新建Promise，它就会立即执行，无法中途取消。如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。当处于 [代码]pending[代码] 状态时，无法得知目前进展到哪一个阶段（刚开始还是即将完成）。总结终于写完了，自己也系统地学完了Promise，输出亦是一种学习的过程。这篇文章主要是对Promise的理解和使用，至于Promise的实现，我也只是简单的看了大概，大家有兴趣可以继续深究源码。此文章只代表个人见解，站在巨人的肩膀上看问题，感谢前辈们的贡献，如有错误，请指出！感谢大家！

2021-11-14

2收藏5评论983浏览

GitHub账号

选择需要上架的开放服务

案例类型