• Live2D 看板娘


    一 微信交互流程

    二 牛逼闪闪的Promise

      promise的含义:

        promise是针对异步编程的一种解决方案(传统方案:回调函数、事件监听),promise比传统方案更合理更强大,因为传统方案在处理复杂业务的情况下,很容易出现callback hell(回调地狱),使得代码很难被理解和维护。它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象。

        使用Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。

      promise的三种状态:

        Pending --> 进行中

        Resolved --> 已完成,又称Fulfilled

        Rejected --> 已失败

        Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected

      promise基本使用:

        ES6规定,Promise对象是一个构造函数,用来生成Promise实例。

        下面代码创造了一个Promise实例:

    var promise = new Promise(function(resolve, reject) {
      // ... some code
    
      if (/* 异步操作成功 */){
        resolve(value);
      } else {
        reject(error);
      }
    });

        上面,我们使用new关键字生成了一个Promise实例,其中resolve和reject为函数的两个参数,它们是两个函数,是由JavaScript引擎提供的,不用自己部署。

        resolve函数,将Promise对象的状态由「未完成(Pending)」变为「成功(Resolved)」,在异步操作成功时调用,并将异步操作的结果,作为参数传递出去。

        reject函数,将Promise对象的状态由「未完成(Pending)」变为「失败(Rejected)」,在异步操作失败时调用,并将异步操作报出错误,作为参数传递出去。

    promise.then(function(value) {
      // success
    }, function(error) {
      // failure
    });

        上面代码中,是Promise实例化后,用then方法分别指定了Resolved状态和Rejected状态的回调函数。then方法可以接受两个回调函数作为参数,第一个回调函数是Promise对象的状态为Resolved时调用,第二个回调函数是Promise对象的状态为Rejected时调用,其中第二个回调函数是可选的,非必填项。这两个函数都接受Promise对象传出的值作为参数。

        如果想要在一个方法中使用promise对象,我们在引入promise库(使用npm安装即可)后,可以这样写:

    function funPromise(param){
        return new Promise(function (reslove, reject) {
            reslove();
            reject();
        });
    };
    funPromise(param).then(function success(){
        //...
    },function fail(){
        //...
    });

        Promise的使用,简而言之就是Promise对象的then方法,把流程中依次执行的异步操作(即回调函数)直接添加进then方法中就可以了。

      Promise A与A+的不同点:

        A+规范通过术语thenable来区分promise对象;

        A+定义onFufilled/onRegected必须是作为函数来调用,而且调用过程必须是异步的;

        A+严格定义了then方法链式调用时onFufilled/onRegected的调用顺序

      Promise库有哪些:

        bluebird

        Q

        then.js

        es6-promise

        ypromise

        async

        native-promise-only

        ...

    三 Generator 生成器

      基本概念:

      Generator函数是ES6提供的一种异步编程解决方案。从语法上讲,可以把Generator函数理解称为一个状态机,封装了多个内部状态。执行Generator函数会返回一个遍历器对象,可以依次遍历Generator函数内部的每一个状态。Generator函数最大特点就是可以交出函数的执行权(即暂停执行)。

      在形式上,Generator函数是一个普通函数,不过它与普通函数相比,有以下两个特性:

        1 function关键字与函数名之间有一个星号;

        2函数体内部使用yield表达式,用来定义不同的内部状态。

      常见的函数不能暂停执行,而 Generator 函数可以,这就是这两者最大的区别。

      使用Generator函数参见以下代码:

    function* helloWorldGenerator() {
      yield 'hello';
      yield 'world';
      return 'ending';
    }
    
    var hw = helloWorldGenerator();
    
    hw.next()
    // { value: 'hello', done: false }
    
    hw.next()
    // { value: 'world', done: false }
    
    hw.next()
    // { value: 'ending', done: true }
    
    hw.next()
    // { value: undefined, done: true }

      上面代码定义了一个 Generator 函数helloWorldGenerator,它内部有两个yield表达式(helloworld),即该函数有三个状态:hello,world 和 return 语句(结束执行)。

      然后,Generator 函数的调用方法与普通函数一样,也是在函数名后面加上一对圆括号。不同的是,调用 Generator 函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象,必须调用遍历器对象的next方法,使得指针移向下一个状态。也就是说,每次调用next方法,内部指针就从函数头部或上一次停下来的地方开始执行,直到遇到下一个yield表达式(或return语句)为止。换言之,Generator 函数是分段执行的,yield表达式是暂停执行的标记,而next方法可以恢复执行。

      yield表达式:

      由于 Generator 函数返回的遍历器对象,只有调用next方法才会遍历下一个内部状态,所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。

      遍历器对象的next方法的运行逻辑如下。

        (1)遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值。

        (2)下一次调用next方法时,再继续往下执行,直到遇到下一个yield表达式。

        (3)如果没有再遇到新的yield表达式,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值,作为返回的对象的value属性值。

        (4)如果该函数没有return语句,则返回的对象的value属性值为undefined

     四 Express中间件与Koa中间件

      express 中间件:参见文章http://blog.csdn.net/u011413061/article/details/50518069

      koa中间件:参见文章http://www.cnblogs.com/Leo_wl/p/4684633.html

  • 相关阅读:
    jascript基础教程学习总结(2)
    ajax原理图解
    ajax原理
    javascript基础教程学习总结(1)
    HTML学习(1)
    vi编辑器
    effective C++ 4 Make sure objects are initialized before they are used
    effective C++ 3 use const whenever possible
    STL: string:erase
    STL: 从reverse到iterator
  • 原文地址:https://www.cnblogs.com/jiangtengteng/p/6930674.html
Copyright © 2020-2023  润新知