js中callback，回调地狱，Promise和async,await的浅解

什么是callback？什么是回调地狱？怎么解决回调地狱？ES6中Promise的理解？async和await的理解？

一、 callback

回调只是使用JavaScript函数的惯例的名称。 JavaScript语言中没有特别的东西叫做“回调”，它只是一个约定。
不像大多数函数那样立即返回一些结果，使用回调函数需要一些时间来产生结果。
“异步”这个词，又名“异步”，意思是“需要一些时间”或“将来会发生，而不是现在”。
通常回调仅在进行I / O时使用，例如下载东西，阅读文件，与数据库交互等。

1.场景：

在异步外面获取异步里面的结果时使用

2.使用回调函数拿取异步结果代码如下：

functiona(fn){setTimeout(()=>{
		sum=10//技巧：在有异步结果的位置，调形参函数，传结果fn(sum)},0)}a((arr)=>{
	console.log(arr)// 10})// 简化抽离functionb(arr){
console.log(arr)// 10}a(b)

3. 优点

在异步有结果的位置，调形参函数，传递结果
解决了同步的问题（只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。）

4. 缺点

//1. 回调函数（callback）setTimeout(()=>{// callback 函数体},1000)ajax('XXX1',()=>{// callback 函数体ajax('XXX2',()=>{// callback 函数体ajax('XXX3',()=>{// callback 函数体})})})

二、 回调地狱

上述代码就是回调地狱，如果处理函数的异步很多，就是异步1里面 有异步2…
就会形成很多嵌套–>回调地狱，
不能try catch 捕获错误
不能return，影响美观不易于维护。
缺乏顺序性： 回调地狱导致的调试困难，和大脑的思维方式不符.
嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身，即（控制反转）
嵌套函数过多的多话，很难处理错误

三 、解决回调地狱使用 ES6中的promise

中文翻译过来承诺,意思是在未来某一个时间点承诺返回数据给你。

介绍promise

1. Promise有三种状态：pending / resolve / reject。

pending 就是未决的
resolve 就是成功的
reject可以理解为拒绝

2. 同时Promise有三种常用的方法：

then 表示异步成功执行后的数据状态为resolve；
catch 表示为异步失败后执行的数据状态reject；
all 表示把多个没有关系的Promise封装成一个Promise对象使用then返回一个数组数据。

3. 使用Promise

a. 构造函数
b. return 一个对象
c. 对象有个 .then()
d. .then(()=>{})有传一个回调函数
e. promise((resolve))
f. resolve() 一调用就会触发外部的 .then的回调

//技巧： 一个异步就是一个Promise对象，调用resolve传递结果var prom=newPromise((resolve,reject)=>{// e.promise((resolve))setTimeout(()=>{var sum=100resolve(sum)},0);})// c.对象有个 .then()// d. .then(()=>{})有传一个回调函数
     prom.then((res)=>{// f. resolve() 一调用就会触发外部的 .then的回调
       console.log('.then 执行了--- ',res);})

Promise构造函数有两个参数的函数：
resolve 用于返回异步执行成功的函数
reject 用于返回异步 执行失败的函数
配合 then与 catch 一起使用

prom('XXX1').then(res=>{// 操作逻辑returnajax('XXX2')}).then(res=>{// 操作逻辑returnajax('XXX3')}).then(res=>{// 操作逻辑})

4. 优点：

Promise就是为了解决callback的问题而产生的。
Promise 实现了链式调用，也就是说每次 then 后返回的都是一个全新 Promise
如果我们在 then 中 return ，return 的结果会被 Promise.resolve() 包装
将回调函数的执行和结果比较清晰的分开了,解决了回调地狱的问题

5. 缺点：

无法取消 Promise ，错误需要通过回调函数来捕获
一堆then，其实并没有将嵌套回调的问题根本上的解决，只是换了一种写法而已。

四、 ES6 co/yield方案 Generator（过渡） —>下一代产品就是 async + await

yield:Generator 函数是协程在 ES6 的实现，而yield是 Generator关键字， 异步操作需要暂停的地方，都用yield语句注明。
co:co 模块是著名程序员 TJ Holowaychuk 于 2013 年 6 月发布的一个小工具，用于 Generator 函数的自动执行。
Generator函数：是协程在 ES6 的实现，最大特点就是可以交出函数的执行权（即主动交出执行权，暂停执行）。
整个 Generator 函数就是一个封装的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都用yield语句注明。

1. Generator 函数的执行方法如下

function*fetch(){yieldajax('XXX1',()=>{})yieldajax('XXX2',()=>{})yieldajax('XXX3',()=>{})}let it=fetch()let result1= it.next()let result2= it.next()let result3= it.next()

Generator 函数不同于普通函数的另一个地方，即执行它不会返回结果，返回的是指针对象。
调用指针it的next方法，会移动内部指针（即执行异步任务的第一段），指向第一个遇到的yield语句，发送请求并暂停，再次调用next会发送请求并暂停住

2. Generator 函数前面要加星号（*）

根据语法规范，yield* 的作用是代理 yield 表达式，将需要函数本身产生（yield）的值委托出去。
yield* 后面跟一个生成器函数、或其他可迭代的对象（如一个数组、字符串、arguments对象）。
yield* 表达式的返回值，就是其后面可迭代对象迭代完毕时的返回值。

3. 使用

varsayHello=function(name, ms){returnnewPromise(function(resolve, reject){setTimeout(function(){
            console.log("hello");
            console.log(name);// if (error) return reject(error);resolve("Hello World");},ms);});}vargen=function*(){yieldsayhello("xiaomi",2000);
    console.log('frist');yieldsayhello("huawei",1000);
    console.log('second');yieldsayhello("apple",500);
    console.log('end');}
console.log("mobile phone");co(gen());
console.log("mobile end");

关于 co/yield详细原理可参考这里:

五、ES7 async/await

1. 说明

async/await是es7的新标准，并且在node7.0中已经得到支持。
它就是 Generator 函数的语法糖，async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。

2. 定义

asyncfunctionfn(sum){setTimeout(async()=>{var sum1=200awaitsum(sum1)},0);}

3. 介绍

async 关键字用于修饰function；
async函数的特征在于调用return返回的并不是一个普通的值，而是一个promise对象，如果正常return了，则返回promise.resolve(返回值)，如果throw一个异常了，则返回promise.reject(异常)
await关键字只能在async函数中使用，不能在任意地方使用await；
await关键字后跟一个promise对象(就是想要执行的异步操作)，函数执行到await后会退出该函数，直到事件轮询检查到promise有了resolve和reject状态，才重新执行这个函数后面的内容。

4. 使用

functionprom(res,ms){returnnewPromise((resolve,reject)=>{setTimeout(()=>{
     	console.log("执行了--2遍");// 第二个执行，调一次函数执行一次
     	console.log(res);if(res==='libai')reject(newError("后面的不执行"));elseresolve(res);}, ms);})}asyncfunctionfn(){try{
		console.log("没有阻塞我先执行--1");// 第一个执行awaitprom('zhang--3',3000)
	    console.log("开始--4");awaitprom('libai',2000);// 符合条件后，后面都不执行
		console.log("结束");awaitprom('测试',1000);}catch(err){
	console.log("出错了"+ err.message);}};fn();

执行结果

5. 错误的处理

await 命令后的promise对象如果变为reject状态，则reject的参数会被catch方法的回调函数接收到，而后续的await就不会执行了。
我们应该将await语句放在try catch代码中，如果有多个await命令，可以统一放在 try catch结构中，通过这种方式对发生的异步错误进行处理。

关于async可参考这里

6.优缺点

优:async、await 是异步的终极解决方案
代码清晰，不用像 Promise 写一大堆 then 链，处理了回调地狱的问题
缺:await 将异步代码改造成同步代码，如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。