项目开发中一些常用的 es6 知识, 主要是为以后分享小程序开发, node+koa 项目开发以及 vueSSR(vue 服务端渲染) 做个前置铺垫.
项目开发常用 es6 介绍
1, 块级作用域 let const
2, 箭头函数及 this 指向
3,promise,asnyc await 语法
4, 模块化 module export 和 import
5, 解构赋值, 字符串模板
- ......
- asnyc await
首先看一段代码示例:
- var promise = () => new Promise((resolve, reject) => {
- setTimeout(() => {
- resolve("我是数据")
- }, 1000)
- }) var func = async () => {
- var data = await promise(); //await 用于等待 promise 函数的结果
- console.log(data) return data // 一秒后打印出 "我是数据"
- }
- console.log(func()) // Promise {<pending>} 即 func 函数的返回值是一个 Promise
- // 调用就立即返回一个状态为 pending 的 Promise, 一秒后变成 resolve 状态
由此可以看出:
1,async 表示函数里有异步操作
2,await 表示紧跟在后面的表达式需要等待结果 (阻塞代码往下执行)
3,async 函数的返回值是 Promise 对象
既然 async 函数的返回值是 Promise 对象, 那就可以使用 then 方法来接收 resolve 传递过来的参数, 上述代码也可以这样实现:
- var promise = () => new Promise((resolve, reject) => {
- setTimeout(() => {
- resolve("我是数据")
- }, 1000)
- }) var func = async () => {
- var data = await promise(); //await 用于等待 promise 函数的结果
- console.log(data) return data // 一秒后打印出 "我是数据"
- }
- // console.log(func()) // Promise {<pending>} 即 func 函数的返回值是一个 Promise
- // 调用就立即返回一个状态为 pending 的 Promise, 一秒后变成 resolve 状态
- func().then((data) => {
- console.log(data) // 我是数据
- })
所以, 再追加一条:
4,async 函数内部 return 语句的返回值, 就是 then 方法回调函数的参数.
也就意味着如果 async 函数内部没有写 return 语句, then 方法回调函数的参数值就是 undefiend.
错误处理
如果 await 后面的异步操作出错, 那么等同于 async 函数返回的 Promise 对象被 reject. 同样如果有多个 await, 其中一个出错也会将 Promise 对象的状态置为 reject. 所以在进行错误处理的时候所以最好把 await 命令放在 try...catch 代码块中.
- var promise = (data, ms) => new Promise((resolve, reject) => {
- setTimeout(() => {
- resolve(data)
- }, ms)
- }) var func = async () => {
- try {
- var data1 = await promise("数据 1", 1000);
- console.log(data1) var data2 = await promise("数据 2", 1000);
- console.log(data2) var data3 = await promise("数据 3", 1000);
- console.log(data3)
- } catch (error) {
- console.error(err)
- }
- }
- func() // 每隔一秒依次打印 数据 1 数据 2 数据 3
- // 如果希望当前一个异步失败不影响后面的异步操作执行可以将其单独放在 try{}catch(){} 语句里
注意: 多个 await 命令后面的异步操作, 如果不存在相互依赖关系, 最好让它们同时触发. 因为当多个 await 后面的异步操作是一个接一个的完成的, 这样会比较耗时, 如果将他们同时触发则会大大缩短程序执行的时间. 比如上述代码可以按照如下写法同时执行:
- var promise = (data, ms) => new Promise((resolve, reject) => {
- setTimeout(() => {
- resolve(data)
- }, ms)
- })
- var func = async () => {
- try {
- // 写法 1
- var data = await Promise.all([promise("数据 1", 1000), promise("数据 2", 1000), promise("数据 3", 1000)]);
- console.log(data) //["数据 1", "数据 2", "数据 3"]
- // 写法 2
- var datafn1 = promise("数据 1", 1000);
- var datafn2 = promise("数据 2", 1000);
- var datafn3 = promise("数据 3", 1000);
- var data1 = await datafn1;
- var data2 = await datafn2;
- var data3 = await datafn3;
- console.log(data1, data2, data3) // 数据 1 数据 2 数据 3
- } catch (error) {
- console.error(error)
- }
- }
- func()
上面两种写法, 都是同时触发, 这样就会缩短程序的执行时间. 注意: 正常情况下, await 命令后面是一个 Promise 对象, 返回该对象的结果. 如果不是 Promise 对象, 就直接返回对应的值.
- async function func() {
- // return 123;
- // return await 123;
- return await Promise.resolve(123)
- }
- func().then(function(data) {
- console.log(data) //123
- })
当然: 如果 func 函数内部没有写 return,then 方法的回调函数里 data 就等于 undefined
来源: https://www.cnblogs.com/wnn0824/p/10188914.html