promise generator asyc/await

ES6中的promise     generator函数      ES7 asyc/await函数

共同点：使异步处理更加优雅

一、Promise是一个构造函数

作用：解决异步回调问题

特点：

1. 对象代表一种异步操作，有3种状态pending（进行中），resolved（已完成，fulfilled），rejected（已失败）
2. 一旦状态改变，就凝固了，不会再改变。Promise 的状态只有2种可能

pending--->resolved

pending--->rejected

有了 Promise 就可以将层层的回调写为同步的样子，表示起来更清晰。不过需要注意以下几点：

• Promise 一旦建立就立即执行，并且无法中断或取消
• 如果没有设置回调函数，那么 Promise 中的产生的错误不会抛到外部
• Pending 状态时，我们无法知道其具体进度

 

基本用法：

构造函数接受一个回调函数为参数，回调函数具有2个参数，也都是函数，resolve 在 Promise 状态变为 resolved 时调用，reject 在 Promise 状态变为 rejected 时调用。resolve 的接受一个参数——值或另一个 promise 对象； rejectj接受一个参数——错误。需要说明的是，这里的 resole 和 reject 函数已经由系统部署好了，我们可以不写。

promise 构建好以后我们就可以调用它的then()方法，then(resolve(value){},reject(value){})方法接受2个函数参数，resolve 在 Promise 状态变为 resolved 时调用，reject 在 Promise 状态变为 rejected 时调用。其中 reject 参数是可选的。和构造函数不同的是，then 方法的 reject 和 resolve 都使用 promise 传出的值作为其唯一的参数。then() 方法返回一个新的 Promise 实例，注意，不是之前那个。因此可以用链式调用，不断添加"回调"函数。 then 的返回值成了下一个 then 中回调函数的参数：

在发生错误的时候执行其参数函数.可以用catch方法来捕获错误

new Promise((resolve, reject) => {
   // 请求数据
 const xhr = new XMLHttpRequest();
 xhr.open("GET", "./data.json",false); // false 为同步 ，默认是false
 xhr.onload = () => resolve(xhr.responseText);
 xhr.onerror = () => reject(xhr.statusText);
 xhr.send();
})   // 处理结果代码
    .then(result=>{
        return   console.log("+++++++++++",result)
    })
    .then(result=>{
       return console.log("+++++++++++++第二个then")
    })
    .catch(err=>{
        console.log("+++++++++++",err);
    })

优点：

解决了callback hell （回调地狱）问题。回调地狱：对于一个异步操作进行频繁调用且保证异步操作顺序。

缺点：

大量使用Promise 容易陷入连续then 函数的调用，而且语义化不明显。

其他：

• Promise静态方法：

Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.all([p1, p2, p3]);

Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是 promise 对象，系统会调用 Promise.resolve() 进行类型转换。

当数组的所有Promise都为resolve的状态时，Promise.all()才会成功；若有一个失败，都会被认为是失败的。当遇到错误，catch处理错误后，状态也是resolve

例如：

var p1 = Promise.resolve('a');

 var p2 = Promise.resolve('b');

 var p3 = Promise.resolve('c');

Promise.all([p1,p2,p3]).then(function(value) {

    console.log(value);  //[a,b,c]

})

• Promise对象方法：

1. then()
2. catch()
3. finally() 方法
4. done()方法

 

二、关于generateor（生成器）

原理：

调用Generator 函数后，函数并不会执行，返回的是一个指向内部状态的指针对象。因此必须调用遍历器对象的next方法，使得指针指向下一状态。因此Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

使用：

定义：

function * gen(){                                  

yield ‘welcome’;

yield ‘welcome’;

return “lichuyan”

}

使用：

let g1=gen(); // 返回的是个对象（Iterator迭代器对象），对象下有next（）方法

g1.next(); // {value:”welcome”,done:”false“}

g1.next(); // {value:”to”,done:”false“}

g1.next(); // {value:”lichuyan”,done:”true“}  // true执行完

上述调用太麻烦，手动调用麻烦

  for ...of 自动遍历generator  

 如：for(let value of g1){

              console.log(value)  // 不需再调用next方法，且return返回的东西，它不会遍历+

        }

作用：解决瀑布级回调函数的繁琐

缺点：

虽然Generator 解决了promise的一些问题，流程更直观，语义化，但是执行Generator 函数需要使用执行器去频繁的调用next 函数。

 

三、async/await函数

原理、背景：

ES7提出的async函数，终于让js对于异步操作有了终极解决方案。async 函数是Generator函数的语法糖，使的异步操作变得更加方便。在函数内部使用await表示异步

使用：

async function fn(){   // 表示异步，这个函数里面有异步任务

  let f1=await ***  // 表示后面结果需要等待

}

特点、优点：

1. await 只能放在async函数中
2. async函数返回的是一个promise。所以有.then()方法
3. await后面可以是promise对象，也可以是数字、字符串、布尔
4. 只要await语句后面Promise状态变成reject，那么整个async函数就会中断

 如何解决async函数中抛出的错误：

try{

}cathc(e){

}

或者

promise本身的catch

意见采用上面方法：

try{

let f1=await readFile(‘data/a.txt’)

let f2=await readFile(‘data/b.txt’)

}catch(e){

}

未完待续，，，，，，