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为例，在服务端演示其用法。

第一步，安装

第二步，使用

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库地址：https://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);
  });