promise、async,await、generator函数

Promise


一般来讲,有以下的名词约定:

  • promise(首字母小写)对象指的是“Promise实例对象”

  • Promise首字母大写且单数形式,表示“Promise构造函数”

  • Promises首字母大写且复数形式,用于指代“Promises规范”

什么是Promise?


  • Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。
  • 从语法上说,promise 是一个对象,从它可以获取异步操作的的最终状态(成功或失败)。
  • Promise是一个构造函数,对外提供统一的 API,自己身上有all、reject、resolve等方法,原型上有then、catch等方法。

Promise的两个特点

  1. Promise对象的状态不受外界影响

              1)pending 初始状态

           2)fulfilled 成功状态

            3)rejected 失败状态

           Promise 有以上三种状态,只有异步操作的结果可以决定当前是哪一种状态,其他任何操作都无法改变这个状态

  1. Promise的状态一旦改变,就不会再变,任何时候都可以得到这个结果,状态不可以逆,只能由 pending变成fulfilled或者由pending变成rejected

使用 new 来创建一个promise对象。


Promise接受一个「函数」作为参数,该函数的两个参数分别是resolve和reject。这两个函数就是就是「回调函数」

resolve函数的作用:在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;

reject函数的作用:在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

const promise = new Promise((resolve, reject) => {
    // do something here ...
    if (success) {
        resolve(value); // fulfilled
    } else {
        reject(error); // rejected
    }
});

 

Asynk,Await

async

async 是“异步”的简写, async 用于申明一个异步的 function

await

await 可以认为是 async wait 的简写,await 用于等待一个异步方法执行完成。

特点:

  1. asayc的用法,它作为一个关键字放到函数前面,这样普通函数就变为了异步函数
  2. 异步async函数调用,跟普通函数的使用方式一样
  3. 异步async函数返回一个promise对象
  4. async函数配合await关键字使用(阻塞代码往下执行)
  5. 是异步方法,但是阻塞式的

async/await的优点

  1. 方便级联调用:即调用依次发生的场景;
  2. 同步代码编写方式: Promise使用then函数进行链式调用,一直点点点,是一种从左向右的横向写法;async/await从上到下,顺序执行,就像写同步代码一样,更符合代码编写习惯;
  3. 多个参数传递: Promise的then函数只能传递一个参数,虽然可以通过包装成对象来传递多个参数,但是会导致传递冗余信息,频繁的解析又重新组合参数,比较麻烦;async/await没有这个限制,可以当做普通的局部变量来处理,用let或者const定义的块级变量想怎么用就怎么用,想定义几个就定义几个,完全没有限制,也没有冗余工作;
  4. 同步代码和异步代码可以一起编写: 使用Promise的时候最好将同步代码和异步代码放在不同的then节点中,这样结构更加清晰;async/await整个书写习惯都是同步的,不需要纠结同步和异步的区别,当然,异步过程需要包装成一个Promise对象放在await关键字后面;
  5. sync/await是对Promise的优化: async/await是基于Promise的,是进一步的一种优化,不过在写代码时,Promise本身的API出现得很少,很接近同步代码的写法;

使用场景

 

  • async主要来处理异步的操作,

  • 需求:执行第一步,将执行第一步的结果返回给第二步使用。在ajax中先拿到一个接口的返回数据,后使用第一部返回的数据执行第二步操作的接口调用,达到异步操作。

Generator

函数的定义

 

  • 语法上,Generator 函数是一个状态机,封装了多个内部状态。
  • 形式上,Generator是一个函数。不同于普通函数,是可以暂停执行的,所以函数名之前要加星号,以示区别。
  • 整个Generator函数就是一个封装的异步任务,或者说是异步任务的容器,异步操作需要暂停的地方,都用yield语句。

什么是Generator函数

 

  1. function 关键字和函数之间有一个星号(*),且内部使用yield表达式,定义不同的内部状态。
  2. 调用Generator函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象。
function fn(){ // 定义一个Generator函数
yield ‘hello’;
yield ‘world’;
return ‘end’;
}
var f1 =fn(); // 调用Generator函数
console.log(f1); // fn {[[GeneratorStatus]]: “suspended”}
console.log(f1.next()); // {value: “hello”, done: false}
console.log(f1.next()); // {value: “world”, done: false}
console.log(f1.next()); // {value: “end”, done: true}
console.log(f1.next()); // {value: undefined, done: true}

 

但是,调用Generator函数后,函数并不执行,返回的也不是函数执行后的结果,而是一个指向内部状态的指针对象。

下一步,必须调用遍历器对象的next方法,使得指针移向下一个状态。即:每次调用next方法,内部指针就从函数头部或上一次停下来的地方开始执行,直到遇到下一个yield表达式(或return语句)为止。

Generator 函数是分段执行的,yield表达式是暂停执行的标记,而next方法可以恢复执行。

 

promise generator aysnc/await

1.三者都是异步编程的解决方案,不同的是,promise为较早出来的,其次generator,最后为async/await,三者象征了前端进行解决异步编程的进化路程。

promise:

 promise比较简单,也是最常用的,主要就是将原来用  回调函数异步编程的方法  转成  relsove和reject触发事件;


    对象内含有四个方法,then()异步请求成功后
                      catch()异步请求错误的回调方法
                      finally()请求之后无论是什么状态都会执行
                      resolve()将现有对象转换为Promise对象
                      all()此方法用于将多个Promise实例包装成一个新的promise实例。
                      race()也是将多个Promise实例包装成一个新的promise实例
                      reject()返回一个状态为Rejected的新Promise实例。
                      
    有点:让回调函数变成了规范的链式写法,程序流程可以看的很清楚
    缺点:编写的难度比传统写法高,阅读代码也不是一眼可以看懂

 

Generator:

generator是一个迭代生成器,其返回值为迭代器(lterator),是ES6标准引入的新的数据类型,主要用于异步编程,它借鉴于Python中的generator概念和语法;

generator函数内有两个重要方法,1 yield表达式 2.next()

Generator 函数是分段执行的,yield表达式是暂停执行的标记,而 next方法可以恢复执行

优点:1.利用循环,每调用一次,就使用一次,不占内存空间 2.打破了普通函数执行的完整性
缺点: 需要用next()方法手动调用,直接调用返回无效iterator 2.

async/await:

   
    async:异步函数
    await:同步操作

     es7中提出来的异步解决方法,是目前解决异步编程终它基极解决方案,于promise为基础,其实也就是generator的高级语法糖,本身自己就相当于一个迭代生成器(状态机),它并不需要手动通过next()来调用自己,与普通函数一样
     
    async就相当于generator函数中的*,await相当于yield,

    async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。
     function getSomething() {
          return "something";
    }

    async function testAsync() {
        return Promise.resolve("hello async");
    }

    async function test() {
        //await是在等待一个async函数完成
        const v1 = await getSomething();
        //await后面不仅可以接Promise,还可以接普通函数或者直接量
        const v2 = await testAsync();
        console.log(v1, v2);
    }

 

总结:


从回调函数,到promise,再到generator,再到Async/await,这四种分别代表了JavaScript异步编程解决方案的进化路程。async和generator函数主要就是为了解决异步的并发调用使用的 ,直接将参数从then里取出来,相比promise的链式调用,传参更加方便,异步顺序更加清晰

你可能感兴趣的:(vue,vue)