关于ES6的Babel，Promise，async和await---简单理解

一：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使异步代码看着像同步代码。

 

 

 

转载：https://blog.csdn.net/m0_61464384/article/details/123953475