一:Babel :
用来把 ES6 的代码转化为浏览器或者其它环境支持的代码。兼容
{
构建bable的工程:
(1)构建 npm包 npm init -y , 并新建 src 目录 和 一个 index.js 文件。
(2)安装依赖包npm install --save-dev babel-loader @babel/core
babel-loader:只是和webpack之间的桥梁,并不会把es6语法进行转换
同时在webpack.config文件中进行配置loader
(3)真正进行编译:
1、安装 npm install @babel/preset-env --save-dev (但是安装完之后执行打包指令是不生效的,需要将@babel/preset-env使能激活。)
2、激活@babel/preset-env的两种方式
在根目录下建立.babelrc文件
在webpack.config.js中moudule规则rules里面配置options
3:箭头函数进行编译了,但es6语法没有进行转换
安装:babel-polyfill: npm install --save @babel/polyfill
使用:在js文件中引入 import "@babel/polyfill"
在webpack中配置如下,可以使用useBuiltIns按需进行补充所使用到的转换,可以减小打包出来文件的大小。
在.babelrc中进行配置,注意格式是json格式,双引号,使用了useBuiltIns的配置后在js文件中引入
}
(4)输入npm run babel 就可以看到src的文件被编译到了dist里面;
二:Promise的理解
promise是跟随es6 出来的对异步回调地狱的一种解决很好的解决方案。
(1)首先补充回调地狱:请求:代表一个网络调用,请求结果:网络请求会进行响应
造成,代码臃肿,可读性差,耦合度高,维护性差,只能在回调里处理异常。
(2)Promise由此诞生:
有三种状态:pending ,fulfilled,rejected
流程:创建Promise对象, .then注册回调函数,实现异步
同时有这三个函数
resolve(成功执行的函数)
reject (失败走的函数)
cash函数:then方法捕捉到Promise状态rejected 执行cash函数
异步任务:前面不影响后面
真正用法:promise的链式编程可以保证代码的执行顺序,但是他的前提是每一次then处理完数据后,一定要return一个promise对象,下一次then才能接受到数据。
详细看代码:(大致是这个意思)
但是这样又代码冗余了,全部都是.then .then 不利于代码维护
于是async和await就可以代替promise了
三:async和await
async:作为一个关键字放在声明函数前面,表示函数为一个异步任务,不会阻塞后面的函数
await:只能在async声明的函数中使用,后面跟着promise实例对象,可以直接拿到promise中resolve数据。
看下面的代码:
封装一个执行上述异步的async函数 await直接拿到fn返回Promise数据 并且复制给res
当anync执行到await时,代码不会继续执行,拿到promise中的resolve数据才继续往下执行,保证了代码的顺序。
anync与await使异步代码看着像同步代码。