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){

}

未完待续,,,,,,

 

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值