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
    评论
Generator是ES6标准引入的一种新的数据类型,是一个迭代生成器,它借鉴了Python中的generator概念和语法。 Generator函数是一种特殊的函数语法,通过在函数名前加上"*"来定义。这种函数可以被称为生成器函数,它可以返回一个迭代器。生成器函数内部使用yield关键字来定义需要生成的值,每次调用生成器函数的next()方法时,会返回yield语句后的值,同时暂停函数的执行,直到下一次调用next()方法再次恢复执行。当生成器函数执行完所有的yield语句后,再次调用next()方法将返回undefined,并且done属性为true,表示生成器函数执行完毕。 在使用生成器函数时,需要通过调用next()方法来启动生成器,并逐步获取生成器函数中定义的值。每次调用next()方法,生成器函数会从上一次执行的yield语句后继续执行,直到遇到下一个yield语句或函数结束。需要注意的是,对于普通的生成器,第一次调用next()方法相当于启动生成器,从生成器函数的第一行代码开始执行,而每次调用next()方法,都会继续从上一次yield语句后的代码开始执行,直到下一个yield语句或函数结束。Generator函数可以通过调用return方法来提前终止函数的执行,并指定返回的值。总的来说,Generator函数是一种分段执行的函数,yield表达式用于暂停函数的执行,而next()方法用于恢复执行。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [generator详解](https://blog.csdn.net/LeoL1u/article/details/107929647)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [es6中的generator函数详解](https://blog.csdn.net/weixin_43638968/article/details/105475881)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值