码迷,mamicode.com
首页 > Web开发 > 详细

js的三种异步处理

时间:2019-05-02 11:54:27      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:并且   syn   func   构造函数   cat   处理   报错   异步操作   new   

Promise 对象

  • 含义: Promise是异步编程的一种解决方案,
  • 优点: 相比传统回调函数和事件更加合理和优雅,Promise是链式编程(后面会详细讲述),有效的解决了令人头痛的回调地狱问题,Promise的结果有成功和失败两种状态,只有异步操作的结果,可以决定当前是哪一种状态,外界的任何操作都无法改变这个状态
  • 基本用法:
    //ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。
    const p = new Promise(function(resolve,reject){
        if(success){
            resolve(‘成功的结果‘)
        }else{
            reject(‘失败的结果‘)
        }
    })
    p.then(function (res) {
        // 接收resolve传来的数据,做些什么
        
    },function (err) {
        // 接收reject传来的数据,做些什么
    })
    p.catch(function (err) {
        // 接收reject传来的数据或者捕捉到then()中的运行报错时,做些什么
    })
    p.finally(function(){
        // 不管什么状态都执行
    })
  • 常用API
    • resolve 返回异步操作成功的结果
    • reject 返回异步操作失败的结果
    • then 执行Promise状态是成功的操作
    • catch 执行Promise状态是失败的操作
    • finally 不管Promise状态是成功或失败都执行的操作
  • Promise.all
    • Promise.all方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
    const p = Promise.all([p1, p2, p3])
p的状态由p1、p2、p3决定,分成两种情况。
(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

Generator 函数

  • 含义: Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同,
    • 基本用法:
    function* helloGenerator() {
      yield ‘hello‘;
      yield ‘Generator‘;
      return ‘over‘;
    }
    
    let hw = helloGenerator();
    hw.next()//{value:"hello",done:false}
    hw.next()//{value:"Generator",done:false}
    hw.next()//{value:"over",done:true}
    hw.next()//{value:undfined,done:true}
  • 特征:
    • 一是,function关键字与函数名之间有一个星号;
    • 二是,函数体内部使用yield表达式,定义不同的内部状态;
    • 三是,通过next方法获取每段状态的返回结果,上面分成4次执行了Gennrator函数,第一次,获取第一个yield函数的返回结果并暂停,done:false,代表函数内的状态还没有执行结束;第二次,同理;第三次,获取return 的返回结果,done:true表示函数内的状态已经执行完毕;第四次,函数内已经没有可以执行的状态,所有返回undfined,同时告诉函数内的状态已经执行完毕;如果函数内没有return,在第三次时返回undfined,done:true表示函数内的状态已经执行完毕

async 函数

  • 含义: async 函数是在ES2017 标准中引入的,async使得异步操作变得更加方便,其实他就是Generator 函数的语法糖
  • 基本用法:
    function get1(){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{resolve(1)},2000)
            
        })
    }
    async function getSet(){
        const n = await get1()
        //const n = await ‘111‘
        return n
    }
    getSet().then(console.log)
  • 说明:
    • await命令只能用在async函数之中,如果用在普通函数,就会报错。
    • await后面是一个Promise对象,如get1 return出去的Promise实例;如果不是 Promise 对象,就直接返回对应的值,如直接返回‘111‘。
      • 1、若Promise 对象, 并且其以值 x 被 fulfilled, 则返回值为 x.
      • 2、Promise 对象, 并且其以异常 e 被 rejected, 则抛出异常 e
    • async函数返回的 Promise 对象,必须等到内部所有await命令后面的 Promise 对象执行完,才会发生状态改变,如果任何一个await语句后面的 Promise 对象变为reject状态或遇到return,那么整个async函数都会中断执行。
    • 另外需要注意的是, await 在等待 Promise 对象时会导致 async function 暂停执行, 一直到 Promise 对象决议之后才会 async function 继续执行.
    • 如果我们希望即使前一个异步操作失败,也不要中断后面的异步操作。这时可以将第一个await放在try...catch结构里面,这样不管这个异步操作是否成功,第二个await都会执行。
    async function f() {
        try {
            await Promise.reject(‘出错了‘);
        } catch(e) {
        }
        return await Promise.resolve(‘hello world‘);
    }

    f().then(v => console.log(v))
  • 优点: 相比Generator函数,async函数有如下四点改进
    • 内置执行器: Generator 函数的执行必须靠next()进行每一次的模块执行,async自带执行器,只需要和普通函数一样调用即可执行
    • **更好的语义:**async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果。
    • 返回值是Promise: async函数的返回值是 Promise 对象,可以用then方法指定下一步的操作;而且async函数完全可以看做多个异步函数的操作,包装成的一个 Promise 对象,而await命令就是内部then命令的语法糖,即Promise.all()的用法
    • **更广的适用性:**相较于Generator函数async函数的await命令后面,可以是 Promise 对象和原始类型的值(数值、字符串和布尔值,但这时会自动转成立即 resolved 的 Promise 对象)
  • 补充
    • 多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发。
    //此处省略getFoo(), getBar()两个函数
    
    // 写法一
    async function getSet(){
        let [foo, bar] = await Promise.all([getFoo(), getBar()]);
        return [foo, bar]
    }

    // 写法二
    async function getSet(){
        let fooPromise = getFoo();
        let barPromise = getBar();
        let foo = await fooPromise;
        let bar = await barPromise;
        return [foo, bar]
    }

*文章参考ECMAScript 6 入门 *

 

 
 

js的三种异步处理

标签:并且   syn   func   构造函数   cat   处理   报错   异步操作   new   

原文地址:https://www.cnblogs.com/mouseleo/p/10801665.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
分享档案
周排行
mamicode.com排行更多图片
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!