javascript异步解决方案

路过的朋友，能够点个赞，关注一下~~~

js异步解决的发展历程：

回调函数----->peomise------>generator + co----->async + await

1. 解决方案之回调函数

回调函数能够解决存在的异步问题，但回调函数分为，同步与异步：

1.2 回调函数能够解决异步问题

callback

回调函数自己是咱们约定俗成的一种叫法，咱们定义它，可是并不会本身去执行它，它最终被其余人执行了。

优势：比较容易理解； 缺点：1.高耦合，维护困难，回调地狱;2.每一个任务只能指定一个回调函数;3.若是几个异步操>做之间并无顺序之分，一样也要等待上一个操做执行结束再进行下一个操做。

下图回调地狱

2. 解决方案之promise的使用

2.1 promise的定义

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

参考

• Promisr A+使用规范

理解：

• 没有异步就不须要promise。
• Promise自己不是异步，只是咱们去编写异步代码的一种方式

2.2 promise 的规范

Es6将promise归入本身规范的时候，也遵循了一个相应的标准 — ``Promise A+规范。

将其概括为4321规范

4：4大术语 3：3种状态 2：2种事件 1：1个对象

2.2.1 四大术语

1. 解决（fulfill）：指一个 promise 成功时进行的一系列操做，如状态的改变、回调的执行。虽然规范中用 fulfill 来表示解决，但在后世的 promise 实现多以 resolve 来指代之。

2. 拒绝（reject）：指一个 promise 失败时进行的一系列操做。

3. 终值（eventual value）：所谓终值，指的是 promise 被解决时传递给解决回调的值，因为 promise 有一次性的特征，所以当这个值被传递时，标志着 promise 等待态的结束，故称之终值，有时也直接简称为值（value）。

4. 据因（reason）：也就是拒绝缘由，指在 promise 被拒绝时传递给拒绝回调的值。

2.2.2 3种状态

• 等待态（Pending）
• 执行态（Fulfilled）
• 拒绝态（Rejected）

针对每种状态的规范 等待态（Pending） 处于等待态时，promise 需知足如下条件：

• 能够迁移至执行态或拒绝态

执行态（Fulfilled）

处于执行态时，promise 需知足如下条件：

• 不能迁移至其余任何状态
• 必须拥有一个不可变的终值

拒绝态（Rejected）

处于拒绝态时，promise 需知足如下条件：

• 不能迁移至其余任何状态
• 必须拥有一个不可变的据因

2.2.3 2种事件

针对3种状态，只有以下两种转换方向：

• pending –> fulfilled
• pendeing –> rejected

在状态转换的时候，就会触发事件。

若是是pending –> fulfiied，就会触发onFulFilled事件 若是是pendeing –> rejected，就会触发onRejected事件

2.2.4 1个对象

就是指promise对象

2.3 promise的基本用法

2.3.1 基本用法

let p = new Promise(function (resolve,reject) {
            reject("no");
        })
        console.log('p :', p);
复制代码

回调函数中的两个参数，其做用就是用于转换状态：

resolve，将状态从pending –> fullFilled reject，将状态从pending –> rejected

2.3.2 then 方法

在状态转换的时候，就会触发事件。

若是是pending –> fulfiied，就会触发onFulFilled事件

若是是pendeing –> rejected，就会触发onRejected事件

针对事件的注册，Promise对象提供了then方法，以下：

2.3.3promise典型定义

2.3.3.1 案例1：读取文件操做

const fs = require("fs");

let p = new Promise(function (resolve,reject) {
    fs.readFile("03-js基础/a.txt","utf8",(err,date)=>{
        if(err){
            reject(err);
        }else{
            resolve(date);
        }
    });
  });
  
  p.then(result=>{
      console.log('result :', result);
  }).catch(err=>{
      console.log('err :', err);
  });
复制代码

2.3.3.2 案例2：根据随机数返回结果

let p = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        let num = Math.random();
        if(num>0.5){
            resolve("success");
        }else{
            reject("fail");
        }
    },1000);
});

p.then(result=>{
    console.log('result :', result);
},err=>{
    console.log('err :', err);
})
复制代码

2.3.3.3 读取文件封装

const fs = require("fs");

function readFile(file){
    return new Promise((resolve,reject)=>{
        fs.readFile("file","utf8",(err,date)=>{
            if(err){
                reject(err);
            }else{
                resolve(date);
            }
        });
    });
}

readFile("a.txt").then(result=>{
    console.log('result :', result);
},err=>{
    console.log('err :', err);
})
复制代码

2.3.4 all和race方法

all：全部，所有执行，而且知足要求 race：竞赛，谁跑的快，执行谁的（不分红功与失败）

all和race都是Promise构造器对象的静态方法。直接使用Promise调用，以下：

• Promise.all（）
• Promise.reace（）
  • 返回值都是promise对象。

当有多个异步操做的时候，常常会有以下两种需求：（有点相似于运算符中的 逻辑与 和 逻辑或）

1. 确保全部的异步操做完成以后，才进行某个操做，只要有一个失败，就不进行

2. 只要有一个异步操做文章，就里面执行某个操做。

all使用以下

若有错误，以下

注意：

all 方法必须全部的异步彻底正确，才会返回true，当其中一个出错的时候，返回false,而且会将第一个出错的错误信息抛出

reac的用法

注意：

reac 方法，就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪一个结果得到的快，就返回那个结果，无论结果自己是成功状态仍是失败状态。

2.4 使用第三方的Promise库

针对第三方的promise库，有两个知名的库：

• bluebird
• q.js

以bluebird为例，在服务端演示其用法。

第一步，安装

第二步，使用

2.5 手写最完整版的promise原理

本人在github中 逐步的封装了基础版promise,升级版promise,完整版的promise,能够进入Github中更有层次的学习原理，

Github地址:github.com/quyuandong/…

3. 解决方案之generator 与 co

3.1 Generator的出现

ES6 增长了一项新的内容：生成器（Generator）。生成器是一种能够从中退出并在以后从新进入的函数。生成器的环境（绑定的变量）会在每次执行后被保存，下次进入时可继续使用

3.2 Generator的使用

生成器的定义相似于普通的函数，只是要加一个*号，好比：function * g() { // 定义一个空生成器}。yield关键字是生成器函数中的亮点（只能在Generator函数中才能使用，普通函数中不可以使用），其字面意思为“产出”，每次程序执行到yield的时候，都会“产出”一个结果。

其实Generator和 yield 两个词用的已经很是形象了，Generator就相似于一个工厂，每当消费者须要某种东西的时候，yield 就负责去生产，生产完了返回给消费者。

示例：

3.3 Generator的执行方式

3.4 generator和Promise、co配合使用

co库地址：github.com/tj/co

$ npm install co

4. 解决方案之async 与 await

async/await是对Promise的优化： async/await是基于Promise的，是进一步的一种优化，不过在写代码时，Promise自己的API出现得不多，很接近同步代码的写法；

4.1 async关键字

• 1）代表程序里面可能有异步过程：
  • 里面能够有await关键字；也能够没有（没有表示所有同步）；
• 2）非阻塞：
  • async函数里面若是有异步过程会等待，可是async函数自己会立刻返回，不会阻塞当前线程，async函数内部由await关键字修饰的异步过程，工做在相应的协程上，会阻塞等待异步任务的完成再返回；
• 3）async函数返回类型为Promise对象：
• 4）无等待
  • 在没有await的状况下执行async函数，它会当即执行，返回一个Promise对象，

4.2 await关键字

• 1）await只能在async函数内部使用：不能放在普通函数里面，不然会报错；

• 2）await关键字后面跟Promise对象：在Pending状态时，相应的协程会交出控制权，进入等待状态，这是协程的本质；

• 3）await是async wait的意思： wait的是resolve(data)的消息，并把数据data返回，

• 4）await后面也能够跟同步代码： 不过系统会自动将其转化成一个Promsie对象，

4.3 简单的使用案例：

源码

function timeout(ms) {
    return new Promise((resolve, reject) => {
      setTimeout(resolve, ms, "finish");
    });
  }

  //异步代码
  async function asyncTimeSys(){
      await timeout(1000);
  }

  //调用方法，接收返回值
  asyncTimeSys().then((value)=>{
      console.log(value);
  });
复制代码