项目开发中一些常用的 es6 知识, 主要是为以后分享小程序开发, node+koa 项目开发以及 vueSSR(vue 服务端渲染)做个前置铺垫.
项目开发常用 es6 介绍
1, 块级作用域 let const
2, 箭头函数及 this 指向
3,promise,
4,async await 语法
4, 模块化 module export 和 import
5, 解构赋值, 字符串模板
......
Promise
Promise 是什么? 不妨直接打印出来看吧! 在浏览器控制台输入 console.dir( Promise )回车会有惊喜.
// 大家在浏览器控制台输入 console.dir( Promise )看一下哈!!!
可以看到 Promise 是一个构造函数, 它跟 JS 中的 Date,Array 等构造函数类似, 使用 new 操作符实例化之后就可以通过传参和调用方法的形式来完成某些特定的功能:
- var date = new Date("2018-12-24 15:46:10");
- date.getTime() //1545637570000
- date.getFullYear() //2018
- date.getDate() //24
同样, 我们也需要使用 new 操作符来实例化 Promise 构造函数, 与其他构造函数不同的是 Promise 接收一个函数作为参数. 该函数又接收两个参数, 分别是 resolve 和 reject,resolve 和 reject 也是函数 (JavaScript 内置的) 且这两个函数都有各自不同的作用. resolve 函数的作用是: 将 Promise 对象的状态从未完成变为成功(即从 pending 变为 resolved) reject 函数的作用是: 将 Promise 对象的状态从未完成变为失败(即从 pending 变为 rejected) 无论结果是成功还是失败, 都可以将需要传递的参数通过该函数传递出去, 以下是代码示例:
- var promise = new Promise(function(resolve, reject) {
- setTimeout(function() {
- resolve("我是数据")
- }, 1000)
- }) var failExample = new Promise(function(resolve, reject) {
- setTimeout(function() {
- reject(new Error('我错了'))
- }, 1000)
- })
then 方法
Promise 实例具有 then 方法, then 方法的第一个参数是 resolve(成功)的回调, 第二个参数 (可选) 是 reject(失败)的回调.
- var promise = new Promise(function(resolve, reject) {
- setTimeout(function() {
- if (false) {
- resolve("我是数据")
- } else {
- reject(new Error('我错了'))
- }
- }, 1000)
- }) promise.then(function(data) {
- console.log(data) // 我是数据 当 if 条件为真时触发
- }, function(err) {
- console.log(err) // Error: 我错了 当 if 条件为假时触发
- })
使用箭头函数的话, 代码会更简洁:
- var promise = new Promise((resolve, reject) => {
- setTimeout(() => {
- false ? resolve("我是数据") : reject(new Error('我错了'))
- }, 1000)
- }) promise.then(
- (data) => console.log(data),
- (err) => console.log(err)
- )
catch 方法
catch 方法和 then 的第二个参数一样, 用来指定 reject 时的回调, 用法是这样:
- var promise = new Promise((resolve, reject) => {
- setTimeout(() => {
- false ? resolve("我是数据") : reject(new Error('我错了'))
- }, 1000)
- })
- promise
- .then(
- (data) => console.log(data)
- )
- .catch(
- (err) => console.log(err)
- )
all 方法
Promise.all 方法用于将多个 Promise 实例, 包装成一个新的 Promise 实例. 此方法提供了并行执行异步操作的能力, 并且在所有异步操作执行完后才执行回调. 举一个例子: 开发中首页可能会有多个接口, 如果写多个方法同时请求数据, 很可能最终页面展示的时候会一块接一块显示出来就像是拼接完成的. 通过 Promise.all 我们就可以将多个方法请求的数据同时展现出来:
- var getData1 = new Promise((resolve, reject) => {
- setTimeout(() => {
- resolve("1, 接口 1 的数据")
- }, 700)
- }) var getData2 = new Promise((resolve, reject) => {
- setTimeout(() => {
- resolve("2, 接口 2 的数据")
- }, 100)
- }) var getData3 = new Promise((resolve, reject) => {
- setTimeout(() => {
- resolve("3, 接口 3 的数据")
- }, 300)
- }) Promise.all(
- [getData1, getData2, getData3]
- ).then((data) => {
- console.log(data) // ["1, 接口 1 的数据", "2, 接口 2 的数据", "3, 接口 3 的数据"]
- })
上述代码可以看出 all 接收一个数组作为参数, 数组成员分别是定义好的 Promise 实例, 当所有的接口都成功时将按顺序把返回的结果放到一个数组里传给 then 方法.
race 方法
Promise.race 方法同样是将多个 Promise 实例, 包装成一个新的 Promise 实例. 使用 race 方法时如果有一个率先成功, 那么就立即返回. 由此可见 all 和 race 的区别是: all 方法的效果实际上是 "谁跑的慢, 以谁为准执行回调", race 方法的效果实际上是 "谁跑的快, 以谁为准执行回调"
- var getData1 = new Promise((resolve, reject) => {
- setTimeout(() => {
- resolve("1, 接口 1 的数据")
- }, 700)
- }) var getData2 = new Promise((resolve, reject) => {
- setTimeout(() => {
- resolve("2, 接口 2 的数据")
- }, 1000)
- }) var getData3 = new Promise((resolve, reject) => {
- setTimeout(() => {
- resolve("3, 接口 3 的数据")
- }, 300)
- })
- Promise
- .race(
- [getData1, getData2, getData3]
- )
- .then((data) => {
- console.log(data)// 3, 接口 3 的数据
- })
Promise 的出现主要是解决地狱回调的问题, 比如有一个功能需要请求很多个接口, 且每一个接口的参数都需要另外一个的接口返回的数据作为依赖, 这样就需要我们一层嵌套一层, 但是有了 Promise 我们就无需嵌套, 就可以使用 then 方法链式调用.
来源: https://www.cnblogs.com/wnn0824/p/10183923.html